Pointer Events API 介紹

by @zhangbao(zhangbao) #0111

概覽

咱們能夠簡單地將 Pointer Events 理解成是 Mouse Event 和 Touch Event 的結合。

當前交互方式

如今主要有三種與輸入設備交互的方式：手指、觸控筆和鼠標。

使用觸控筆和手指操做設備（觸發 Touch 事件）

或者使用鼠標設備操做（觸發 mouse** 事件，例如 mousedown）

問題所在

假設如今咱們須要完成一個網頁，這個網頁能適配桌面端和移動端。並且網頁上有一個元素，要求既要能響應桌面端設備的鼠標點擊，又能響應移動端手指的點擊。

那麼咱們可能會寫出以下的代碼：

elem.addEventListener('mousedown', evt => {
  // do some more cool stuff here
});

// 對觸摸事件，作了是否由 Apple 觸控筆觸發的判斷。
elem.addEventListener('touchstart', evt => {
  // do some more cool stuff here
  switch (evt.touches[0].touchType) {
		// Apple 觸控筆觸發
    case 'stylus':
      break;
    // 手指觸發
    case 'direct'
      break;
    default:
      // ...
	}
});
複製代碼

你們看，爲了同時支持桌面端和移動端。咱們爲同一個元素綁定了兩次事件。

那若是用 Pointer Events API 改寫呢？

Pointer Events API 的寫法

elem.addEventListener('pointerdown', (e) => {
  switch (e.pointerType) {
    case 'mouse': {
      console.log('Pointer type detected: mouse');
      break;
    }
    case 'pen': {
      console.log('Pointer type detected: pen');
      break;
    }
    case 'touch': {
      console.log('Pointer type detected: touch');
      break;
    }
    default: {
      console.log('PointerType is unknown or could not be detected');
    }
  }
});
複製代碼

看到沒，一次綁定、適用所有！咱們使用事件對象的 .pointerType 屬性區分是由何類輸入設備觸發的。這就是使用 Pointer Events API 的優點所在。

咱們能夠把 mouse、pen、touch 這三者都簡單抽象成一個點（Pointer）。Pointer Events API 爲這三者建立了統一的事件模型，由它們觸發的事件，統稱爲「指針事件（Pointer Event）」。

所以，咱們能夠簡單地將 Pointer Events 理解成是 Mouse Event 和 Touch Event 的結合。之前須要註冊兩次的事件監聽器，如今減小到只要一次。

繼承自 MouseEvent

Pointer Event 繼承自 MouseEvent。所以，與鼠標事件的命名頗爲類似。這樣作的目的，是爲了更好從鼠標事件往指針事件上過渡，同時還能對 Touch 事件提供支持（指針對象中也包含了一些與觸摸事件相關的數據，好比壓力、方向偏移之類的信息）。

Pointer Event	Mouse Event
pointerover	mouseover
pointerover	mouseover
pointerenter	mouseenter
pointerdown	mousedown
pointermove	mousemove
pointerup	mouseup
pointercancel	無對應事件
pointerout	mouseout
pointerleave	mouseleave
gotpointercapture	無對應事件
lostpointercapture	無對應事件

檢查是否支持

咱們可使用下面的代碼，檢查當期瀏覽器是否支持 Pointer Event API：

if (window.PointerEvent) {
  // Hello Pointer Events
} else {
  // Oh... Hi fallback... it's you.
}
複製代碼

參考連接

• dev.to/pfacklam/co…
• pawelgrzybek.com/whats-the-d…
• stackoverflow.com/questions/3…

（正文完）

---

廣告時間（長期有效）

我有一位好朋友開了一間貓舍，在此幫她宣傳一下。如今貓舍裏養的都是布偶貓。若是你也是個貓奴而且有須要的話，不妨掃一掃她的【閒魚】二維碼。不買也沒關係，看看也行。

（完）