跳至主要内容

[WebAPIs] Touch 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() 。

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，而不是對整個文件。

參考資料​