PJCHENder 未整理筆記

[JS] Touch Event

2017-09-26

[JS ]Touch Event

@(Javascript)[ES6, JavaScript, webAPIs, event]

touchEvent 和 mouseEvent 有一點很大的差異是在 touchEvent 支援多點觸控,但 mouseEvent 一次只能有一個觸擊點。

TouchEvent 包含三個主要的接口(interface)

  • touch:包含 unique identifier, 座標系統和被點擊的目標
  • touchList:越多 touch 事件同時觸發時候,touchList 的 length 會越多。
  • touchEvent
    touches:列出在螢幕上當前所有的觸控點,可以透過 e.touches.length 取得觸控點數目。
    targetTouches: 列出在目標 DOM 上所有的觸控點。
    changedTouches:根據不同的事件類型會有列出不同的觸控點。

和四個事件類型

  • touchstart
  • touchmove
  • touchend
  • touchcancel

在 callback 中可以得到一些事件物件:

  • Touch.identifier:取得該 touch event 的獨特值(unique value),一個 touch 事件會對應到一個獨特值(起始值是 0),直到該 touch 結束。

避免 mouse 和 touch 事件衝突

由於瀏覽器會是的模擬 mouseEvent,因此同一個 touch 事件有可能會同時觸發 touch event 和 mouse event,為了避免這樣的情況,我們可以使用 preventDefault()

1
2
3
4
function process_touchmove(ev) {
// Call preventDefault() to prevent any further handling
ev.preventDefault();
}

事件觸發的順序

  • touchstart
  • Zero or more touchmove events, depending on movement of the finger(s)
  • touchend
  • mousemove
  • mousedown
  • mouseup
  • click

使用時的一些考量

  • 針對特定的元素監聽 touch event,而不是對整個文件。

參考資料

掃描二維條碼,分享此文章