觸摸事件是移動瀏覽器特有的HTML5事件,雖然click事件在pc和移動端更通用,但是在移動端會出現300ms延遲,較為影響用戶體驗,300ms延遲來自判斷雙擊和長按,因為只有默認等待時間結束以確定沒有后續動作發生時,才會觸發click事件。所以觸摸事件反應更快,體驗更好。
觸摸事件的類型:
為了區別觸摸相關的狀態改變,存在多種類型的觸摸事件??梢酝ㄟ^檢查觸摸事件的 TouchEvent.type
屬性來確定當前事件屬于哪種類型。
注意: 在很多情況下,觸摸事件和鼠標事件會同時被觸發(目的是讓沒有對觸摸設備優化的代碼仍然可以在觸摸設備上正常工作)。如果你使用了觸摸事件,可以調用 event.preventDefault()
來阻止鼠標事件被觸發。
標準的觸摸事件
事件名稱 | 描述 | 包含touches數組 |
touchstart | 當用戶在觸摸平面上放置了一個觸點時觸發。事件的目標 element 將是觸點位置上的那個目標 element | 是 |
touchmove | 當用戶在觸摸平面上移動觸點時觸發。 事件的目標 哪怕當 | 是 |
touchend | 當一個觸點被用戶從觸摸平面上移除(當用戶將一個手指離開觸摸平面)時觸發。 當觸點移出觸摸平面的邊界時也將觸發。例如用戶將手指劃出屏幕邊緣。 已經被從觸摸平面上移除的觸點,可以在 | 是 |
touchenter | 當觸點進入某個 element 時觸發。此事件沒有冒泡過程。 | 是 |
touchleave | 當觸點離開某個 element 時觸發。此事件沒有冒泡過程。 | 是 |
touchcancel | 當觸點由于某些原因被中斷時觸發。有幾種可能的原因如下(具體的原因根據不同的設備和瀏覽器有所不同):
| 是 |
觸摸對象屬性
Touch.identifier | 返回一個可以唯一地識別和觸摸平面接觸的點的值. 這個值在這根手指(或觸摸筆等)所引發的所有事件中保持一致, 直到它離開觸摸平面. |
Touch.screenX | 觸點相對于屏幕左邊沿的的X坐標. 只讀屬性. |
Touch.screenY | 觸點相對于屏幕上邊沿的的Y坐標. 只讀屬性. |
Touch.clientX | 觸點相對于可見視區左邊沿的的X坐標. 不包括任何滾動偏移. 只讀屬性. |
Touch.clientY | 觸點相對于可見視區上邊沿的的Y坐標. 不包括任何滾動偏移. 只讀屬性. |
Touch.pageX | 觸點相對于HTML文檔左邊沿的的X坐標. 當存在水平 滾動的 偏移時, 這個值包含了水平滾動的偏移 . 只讀屬性. |
Touch.pageY | 觸點相對于HTML文檔上邊沿的的Y坐標. 當存在水平滾動的偏移時, 這個值包含了垂直滾動的偏移 . 只讀屬性. |
Touch.radiusX | 能夠包圍用戶和觸摸平面的接觸面的最小橢圓的水平軸(X軸)半徑. 這個值的單位和 screenX 相同. 只讀屬性. |
| 手指擠壓觸摸平面的壓力大小, 從0.0(沒有壓力)到1.0(最大壓力)的浮點數. 只讀屬性. |
| 能夠包圍用戶和觸摸平面的接觸面的最小橢圓的垂直軸(Y軸)半徑. 這個值的單位和 screenY 相同. 只讀屬性. |
| 當這個觸點最開始被跟蹤時(在 或者這個元素已經被從文檔中移除. 需要注意的是, 如果這個元素在觸摸過程中被移除, 這個事件仍然會指向它, 但是不會再冒泡這個事件到 因此, 如果有元素在觸摸過程中可能被移除, 最佳實踐是將觸摸事件的監聽器綁定到這個元素本身, 防止元素被移除后, 無法再從它的上一級元素上偵測到從該元素冒泡的事件. 只讀屬性. |
IE10+的觸摸事件
事件名稱 | 描述(在觸摸設備上) |
---|---|
MSPointerDown | 觸摸開始 |
MSPointerMove | 接觸點移動 |
MSPointerUp | 觸摸結束 |
MSPointerOver | 觸摸點移動到元素內,相當于mouseover |
MSPointerOut | 觸摸點離開元素,相當于mouseout |
MSPointerEvent屬性
屬性 | 描述 |
---|---|
hwTimestamp | 創建事件的時間(ms) |
isPrimary | 標識該指針是不是主指針 |
pointerId | 指針的唯一ID(類似于觸摸事件的標識符) |
pointerType | 一個整數,標識了該事件來自鼠標、手寫筆還是手指 |
pressure | 筆的壓力,0-255,只有手寫筆輸入時才可用 |
rotation | 0-359的整數,光標的旋轉度(如果支持的話) |
tiltX/tiltY | 手寫筆的傾斜度,只有用手寫筆輸入時才支持 |
等價事件
鼠標 | 觸摸 | 鍵盤 |
mousedown | touchstart | keydown |
mousemove | touchmove | keydown |
mouseup | touchend | keyup |
mouseover | focus |
很顯然,觸摸動作序列:touchstart-touchmove-touchend和鼠標序 列:mousedown-mousemove-mouseup以及鍵盤序列:keydown-keypress-keyup很相似,這并不是巧合,因為這 三種交互模式都可以描述為start-move-stop。
話說回來,click要經過touchstart-touchmove-touchend流程,300ms延遲,所以需要tap事件,tap就是在同一個點輕觸時間很短。
封裝好的tap和longtap事件
- 綠毒越獄軟件 完美越獄4.21教程12-21
- htcg15怎么刷機?htcg15刷機教程12-21
- HTC hd7刷安卓2.2全教程12-21
- mpkg軟件下載和卸載的方法12-21
- 網站后臺系統設置的網站地址格式寫法07-09
- 防止重復提交js按鈕變灰07-09
- 不同時間顯示不同的廣告代碼07-09
- iframe框架調用高度自適應方法07-09
- 備份數據庫出現問題的解決方法07-09