觸摸事件是移動(dòng)瀏覽器特有的HTML5事件，雖然click事件在pc和移動(dòng)端更通用，但是在移動(dòng)端會(huì)出現(xiàn)300ms延遲，較為影響用戶體驗(yàn)，300ms延遲來自判斷雙擊和長按，因?yàn)橹挥心J(rèn)等待時(shí)間結(jié)束以確定沒有后續(xù)動(dòng)作發(fā)生時(shí)，才會(huì)觸發(fā)click事件。所以觸摸事件反應(yīng)更快，體驗(yàn)更好。
觸摸事件的類型：
為了區(qū)別觸摸相關(guān)的狀態(tài)改變，存在多種類型的觸摸事件。可以通過檢查觸摸事件的 TouchEvent.type 屬性來確定當(dāng)前事件屬于哪種類型。
注意: 在很多情況下，觸摸事件和鼠標(biāo)事件會(huì)同時(shí)被觸發(fā)（目的是讓沒有對觸摸設(shè)備優(yōu)化的代碼仍然可以在觸摸設(shè)備上正常工作）。如果你使用了觸摸事件，可以調(diào)用 event.preventDefault() 來阻止鼠標(biāo)事件被觸發(fā)。
標(biāo)準(zhǔn)的觸摸事件
| 事件名稱 | 描述 | 包含touches數(shù)組 |
touchstart | 當(dāng)用戶在觸摸平面上放置了一個(gè)觸點(diǎn)時(shí)觸發(fā)。事件的目標(biāo) element 將是觸點(diǎn)位置上的那個(gè)目標(biāo) element | 是 |
touchmove | 當(dāng)用戶在觸摸平面上移動(dòng)觸點(diǎn)時(shí)觸發(fā)。 事件的目標(biāo) 哪怕當(dāng) | 是 |
touchend | 當(dāng)一個(gè)觸點(diǎn)被用戶從觸摸平面上移除（當(dāng)用戶將一個(gè)手指離開觸摸平面）時(shí)觸發(fā)。 當(dāng)觸點(diǎn)移出觸摸平面的邊界時(shí)也將觸發(fā)。例如用戶將手指劃出屏幕邊緣。 已經(jīng)被從觸摸平面上移除的觸點(diǎn)，可以在 | 是 |
touchenter | 當(dāng)觸點(diǎn)進(jìn)入某個(gè) element 時(shí)觸發(fā)。此事件沒有冒泡過程。 | 是 |
touchleave | 當(dāng)觸點(diǎn)離開某個(gè) element 時(shí)觸發(fā)。此事件沒有冒泡過程。 | 是 |
touchcancel | 當(dāng)觸點(diǎn)由于某些原因被中斷時(shí)觸發(fā)。有幾種可能的原因如下（具體的原因根據(jù)不同的設(shè)備和瀏覽器有所不同）：
| 是 |
觸摸對象屬性
Touch.identifier | 返回一個(gè)可以唯一地識(shí)別和觸摸平面接觸的點(diǎn)的值. 這個(gè)值在這根手指（或觸摸筆等）所引發(fā)的所有事件中保持一致, 直到它離開觸摸平面. |
Touch.screenX | 觸點(diǎn)相對于屏幕左邊沿的的X坐標(biāo). 只讀屬性. |
Touch.screenY | 觸點(diǎn)相對于屏幕上邊沿的的Y坐標(biāo). 只讀屬性. |
Touch.clientX | 觸點(diǎn)相對于可見視區(qū)左邊沿的的X坐標(biāo). 不包括任何滾動(dòng)偏移. 只讀屬性. |
Touch.clientY | 觸點(diǎn)相對于可見視區(qū)上邊沿的的Y坐標(biāo). 不包括任何滾動(dòng)偏移. 只讀屬性. |
Touch.pageX | 觸點(diǎn)相對于HTML文檔左邊沿的的X坐標(biāo). 當(dāng)存在水平滾動(dòng)的偏移時(shí), 這個(gè)值包含了水平滾動(dòng)的偏移. 只讀屬性. |
Touch.pageY | 觸點(diǎn)相對于HTML文檔上邊沿的的Y坐標(biāo). 當(dāng)存在水平滾動(dòng)的偏移時(shí), 這個(gè)值包含了垂直滾動(dòng)的偏移. 只讀屬性. |
Touch.radiusX | 能夠包圍用戶和觸摸平面的接觸面的最小橢圓的水平軸(X軸)半徑. 這個(gè)值的單位和 screenX 相同. 只讀屬性. |
| 手指擠壓觸摸平面的壓力大小, 從0.0(沒有壓力)到1.0(最大壓力)的浮點(diǎn)數(shù). 只讀屬性. |
| 能夠包圍用戶和觸摸平面的接觸面的最小橢圓的垂直軸(Y軸)半徑. 這個(gè)值的單位和 screenY 相同. 只讀屬性. |
| 當(dāng)這個(gè)觸點(diǎn)最開始被跟蹤時(shí)(在 或者這個(gè)元素已經(jīng)被從文檔中移除. 需要注意的是, 如果這個(gè)元素在觸摸過程中被移除, 這個(gè)事件仍然會(huì)指向它, 但是不會(huì)再冒泡這個(gè)事件到 因此, 如果有元素在觸摸過程中可能被移除, 最佳實(shí)踐是將觸摸事件的監(jiān)聽器綁定到這個(gè)元素本身, 防止元素被移除后, 無法再從它的上一級(jí)元素上偵測到從該元素冒泡的事件. 只讀屬性. |
IE10+的觸摸事件
| 事件名稱 | 描述（在觸摸設(shè)備上） |
|---|---|
| MSPointerDown | 觸摸開始 |
| MSPointerMove | 接觸點(diǎn)移動(dòng) |
| MSPointerUp | 觸摸結(jié)束 |
| MSPointerOver | 觸摸點(diǎn)移動(dòng)到元素內(nèi)，相當(dāng)于mouseover |
| MSPointerOut | 觸摸點(diǎn)離開元素，相當(dāng)于mouseout |
MSPointerEvent屬性
| 屬性 | 描述 |
|---|---|
| hwTimestamp | 創(chuàng)建事件的時(shí)間（ms） |
| isPrimary | 標(biāo)識(shí)該指針是不是主指針 |
| pointerId | 指針的唯一ID（類似于觸摸事件的標(biāo)識(shí)符） |
| pointerType | 一個(gè)整數(shù)，標(biāo)識(shí)了該事件來自鼠標(biāo)、手寫筆還是手指 |
| pressure | 筆的壓力，0-255，只有手寫筆輸入時(shí)才可用 |
| rotation | 0-359的整數(shù)，光標(biāo)的旋轉(zhuǎn)度（如果支持的話） |
| tiltX/tiltY | 手寫筆的傾斜度，只有用手寫筆輸入時(shí)才支持 |
等價(jià)事件
| 鼠標(biāo) | 觸摸 | 鍵盤 |
| mousedown | touchstart | keydown |
| mousemove | touchmove | keydown |
| mouseup | touchend | keyup |
| mouseover | focus |
很顯然，觸摸動(dòng)作序列：touchstart-touchmove-touchend和鼠標(biāo)序 列：mousedown-mousemove-mouseup以及鍵盤序列：keydown-keypress-keyup很相似，這并不是巧合，因?yàn)檫@ 三種交互模式都可以描述為start-move-stop。
話說回來，click要經(jīng)過touchstart-touchmove-touchend流程，300ms延遲，所以需要tap事件，tap就是在同一個(gè)點(diǎn)輕觸時(shí)間很短。
封裝好的tap和longtap事件
新聞熱點(diǎn)
疑難解答
圖片精選
