＃觸控事件

學習如何在 JavaScript 中處理觸控事件的基本知識。

更多 JavaScript 事件資訊，請參閱JavaScript 事件

觸控事件是在行動裝置（如智能手機或平板電腦）上瀏覽網頁時觸發的事件。

它們允許您追蹤多點觸控事件。

我們有四種觸控事件：

  • touchstart：觸控事件開始（觸碰表面）
  • touchend：觸控事件結束（觸碰結束）
  • touchmove：手指（或其他碰觸裝置的物體）在表面上移動
  • touchcancel：觸控事件被取消

每次觸控事件發生時，我們都會收到一個觸控事件：

const link = document.getElementById('my-link')
link.addEventListener('touchstart', event => {
 // 觸控事件開始
})

以下是我們可以在該事件上訪問的所有屬性：

  • identifier：此特定事件的唯一識別符。用於追蹤多點觸控事件。同一根手指=相同的識別符。
  • clientX / clientY：滑鼠指標相對於瀏覽器視窗的 x 和 y 座標，不考慮捲動。
  • screenX / screenY：滑鼠指標在螢幕座標中的 x 和 y 座標。
  • pageX / pageY：滑鼠指標在頁面座標中的 x 和 y 座標（包括捲動）。
  • target：被觸碰的元素。