Touch對象--MDN
TouchEvent--MDN

一、問題背景

click事件在移動端的300毫秒延遲問題

當需要監聽諸如左滑、右滑之類的事件

二、知識點概括

1. 事件類型

• touchstart: //手指放到屏幕上時觸發

• touchmove: //手指在屏幕上滑動式觸發

• touchend: //手指離開屏幕時觸發

• touchcancel: //系統取消touch事件的時候觸發

2. TouchEvent事件（均只讀）

• targetTouches?
  一個?TouchList?對象，是包含了如下觸點的?Touch?對象：觸摸起始于當前事件的目標?element?上，并且仍然沒有離開觸摸平面的觸點。

• touches
  一個?TouchList?對象，包含了所有當前接觸觸摸平面的觸點的?Touch?對象，無論它們的起始于哪個?element?上，也無論它們狀態是否發生了變化。

• changedTouches?
  一個?TouchList?對象，包含了代表所有從上一次觸摸事件到此次事件過程中，狀態發生了改變的觸點的?Touch?對象。

• ctrlKey
  ?只讀布爾值，指明觸摸事件觸發時，鍵盤 ctrl 鍵是否被按下。

• metaKey?
  只讀布爾值，指明觸摸事件觸發時，鍵盤 meta 鍵 （Wikipedia - meta Key）是否被按下。

• shiftKey?
  只讀布爾值，指明觸摸事件觸發時，鍵盤 shift 鍵是否被按下。

• altKey?
  只讀布爾，指明觸摸事件觸發時，鍵盤 alt 鍵是否被按下。

3. Touch對象（均只讀）

• identifier
  此 Touch 對象的唯一標識符. 一次觸摸動作(我們值的是手指的觸摸)在平面上移動的整個過程中, 該標識符不變. 可以根據它來判斷跟蹤的是否是同一次觸摸過程.?

• screenX
  觸點相對于屏幕左邊沿的的X坐標.?

• screenY
  觸點相對于屏幕上邊沿的的Y坐標.?

• clientX
  觸點相對于可見視區(visual viewport)左邊沿的的X坐標. 不包括任何滾動偏移.?

• clientY
  觸點相對于可見視區(visual viewport)上邊沿的的Y坐標. 不包括任何滾動偏移.?

• pageX
  觸點相對于HTML文檔左邊沿的的X坐標.?當存在水平滾動的偏移時, 這個值包含了水平滾動的偏移.

• pageY
  觸點相對于HTML文檔上邊沿的的Y坐標.?當存在水平滾動的偏移時, 這個值包含了垂直滾動的偏移.?

• radiusX
  能夠包圍用戶和觸摸平面的接觸面的最小橢圓的水平軸(X軸)半徑. 這個值的單位和screenX 相同.?

• radiusY
  能夠包圍用戶和觸摸平面的接觸面的最小橢圓的垂直軸(Y軸)半徑. 這個值的單位和screenY 相同.?

• rotationAngle
  它是這樣一個角度值：由radiusX 和?radiusY 描述的正方向的橢圓，需要通過順時針旋轉這個角度值，才能最精確地覆蓋住用戶和觸摸平面的接觸面.

• force
  手指擠壓觸摸平面的壓力大小, 從0.0(沒有壓力)到1.0(最大壓力)的浮點數.?

• target
  當這個觸點最開始被跟蹤時(在?touchstart 事件中), 觸點位于的HTML元素. 哪怕在觸點移動過程中, 觸點的位置已經離開了這個元素的有效交互區域, 或者這個元素已經被從文檔中移除. 需要注意的是, 如果這個元素在觸摸過程中被移除, 這個事件仍然會指向它, 但是不會再冒泡這個事件到?window 或?document 對象. 因此, 如果有元素在觸摸過程中可能被移除, 最佳實踐是將觸摸事件的監聽器綁定到這個元素本身, 防止元素被移除后, 無法再從它的上一級元素上偵測到從該元素冒泡的事件.

三、 測試情況

//事件說明：s:touchstart , e:touchend , m:touchmove, c:click //結果說明：1:true 0:false 1. TouchEvent.changedTouches[0].pageX ios : s1 e1 m1 c0 android :s1 e1 m1 c02. TouchEvent.touches[0].pageX ios: s1 e0 m1 c0 android :s1 e0 m1 c03. TouchEvent.targetTouches[0].pageX ios:s1 e0 m1 c0 android :s1 e0 m1 c0

四、總結

手機上的點擊事件，建議使用touchend 代替click解決點擊延遲問題

如果需要監聽屏幕滑動方向、距離等，建議使用touchstart & touchend的 TouchEvent.changedTouches來獲取點擊位置

總結

以上是生活随笔為你收集整理的touch事件总结，监听屏幕点击事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。