JavaScript >> Javascript 文檔 >  >> Tags >> API

使用指針事件 API 處理鼠標和触摸輸入

隨著越來越多的人使用手機和平板電腦瀏覽網頁,我們作為開發人員必須確保我們的網頁界面完全可以通過觸摸訪問。設置 clickhover 事件監聽器有點工作,但它顯然是鼠標時代遺留下來的解決方案。

值得慶幸的是,鎮上有一個新的 API 可以滿足鼠標、觸控和触控筆設備的需求。它被稱為指針事件(不要與同名的 CSS 屬性混淆),它允許我們添加更適合處理所有輸入類型的事件偵聽器。

認識新活動

新的指針事件 API 是迄今為止我們一直在使用的鼠標事件接口的演變版本。它擴展了舊 API 的功能,並增加了對多點觸控手勢、精確筆輸入和整體更流暢的觸摸屏交互的支持。

  • pointerdown - 指針變為活動狀態
  • pointerup - 指針停止活動
  • pointerover, pointerenter - 指針進入元素邊界
  • pointerout、pointerleave - 指針離開元素邊界
  • pointermove - 指針在元素邊界內移動
  • pointercancel - 指針已停止生成事件,例如輸入設備已停用
  • gotpointercapture - 指針已進入指針捕獲狀態,例如拖動可移動元素
  • lostpointercapture - 指針捕獲狀態已結束

大多數指針事件在舊的鼠標事件中都有直接的替代方案。一旦新 API 獲得完整的瀏覽器支持,我們就可以直接用更現代的替代方案替代:

const button = document.querySelector("button");

// Instead of mouseover
button.addEventListener('mouseover', doSomething);

// We can use pointerover
button.addEventListener('pointerover', doSomething);

在這兩種情況下,與鼠標的交互應該是相同的。但是,使用手指或手寫筆使用新 API 進行編程會更容易。

識別輸入類型

Pointer Events API 的一個很棒的特性是它可以判斷使用了哪種類型的輸入。當您想忽略某些輸入法或為每種輸入法提供特殊反饋時,這會很有幫助。

button.addEventListener('pointereover', function(ev){
  switch(ev.pointerType) {
    case 'mouse':
      // The used device is a mouse or trackpad.
      break;
    case 'touch':
      // Input via touchscreen.
      break;
    case 'pen':
      // Stylus input.
      break;
    default:
      // Browser can't recognize the used device.
      break;
  }
});

其他屬性

Pointer Events 接口還提供了一些其他有趣的數據。它包括所有 MouseEvent 屬性以及以下內容:

  • pointerId - 導致事件的指針的唯一 ID。
  • 寬度和高度 - 接觸區域的大小(以像素為單位)。
  • 壓力 - 觸摸壓力(如果有)。
  • tiltX 和tiltY - 觸控筆觸摸屏幕的角度。
  • isPrimary - 確定 pirmary 指針設備是否已發出事件。

瀏覽器支持

指針事件是相當新的,所以瀏覽器兼容性還不完美。 Chrome(桌面和移動)、Edge、IE、Opera 全面支持; Firefox 和 Safari 沒有。

我可以用嗎

要檢查瀏覽器是否具有指針事件 API,您可以使用 window 對象:

if (window.PointerEvent) {
  // Pointer Events enabled.
} else {
  // Pointer Events not supported
}

不想等待瀏覽器全面採用的人也可以使用流行的開源 pollyfill。

結論

雖然它還沒有完全支持瀏覽器,但指針事件 API 最終將接管舊的鼠標事件。它提供了許多很酷的功能,可以增加 Web 的可訪問性,並使開發人員能夠創建更高級的基於觸控和触控筆的應用程序。

如果您想了解有關 Power Events API 的更多信息,我們建議您查看以下資源:

  • 指明前進的方向 - 關於 Google 開發者的文章
  • 指針事件 - 第 2 級 - W3C 編輯草案
  • MDN 上的指針事件

下一篇
No
Tutorial JavaScript 教程
  1. 使用 AWS 在生產環境中運行 Strapi

  2. React 網站與圖像幻燈片

  3. 頁面加載後提醒

  4. 如何調試電子應用程序

  5. Deno,第一種方法

  6. 如何在 React、Next js 中快速製作 Pdf

  7. 第 13 天:在用戶等待時閃爍輕按按鈕(使用 React 和样式化組件)

  1. 如何構建 Instagram 導航欄克隆 | HTML CSS &Js

  2. JavaScript 可選參數 |示例代碼

  3. ShoPo - 如何將文本複製到剪貼板

  4. OSD600 - 實驗室 06

  5. 如何在 React 中創建自定義樣式的 Google 地圖

  6. CodeIgniter 中的 CKEditor

  7. MS 詳細信息 IE7 CSS 更改

  1. 蓋茨比簡介

  2. React-Native/React - 用於有效開發的 VsCode 擴展

  3. 如何使用 Phoenix 和 React 創建實時提要

  4. 什麼是 JavaScript 承諾?超高水平的解釋。