前言

這篇文章在草稿箱里躺了很久，因?yàn)樽罱钟龅搅讼嚓P(guān)問題，于是又整理了一下。請(qǐng)注意這里講的不是 css 的 pointer-events。下面話不都說了，來一起看看詳細(xì)的介紹吧。

起因

從某個(gè)月黑風(fēng)高的晚上開始，有人發(fā)現(xiàn)我們的 web-app 在 Chrome 模擬器里開始出現(xiàn)報(bào)錯(cuò)，報(bào)錯(cuò)信息大概就是下面這樣。

VM1023:1 Uncaught TypeError: Cannot read property '0' of undefined

但是只有他的瀏覽器有問題，而且對(duì)功能毫無影響，本著在我的機(jī)器上不復(fù)現(xiàn)的精神（好吧，當(dāng)時(shí)比較忙），這個(gè)問題的優(yōu)先級(jí)排的不高，但是后面一段時(shí)間慢慢有人也出現(xiàn)相同的問題，于是我開始在意這個(gè)問題了。

定位問題

根據(jù)調(diào)用棧很快定位到了代碼，源碼定位到之前一位同事寫的組件代碼，大概是這樣的：

dom.on('touchstart pointerdown', function (event) {
 /*部分業(yè)務(wù)代碼*/
 var touch = event.touches[0]; //報(bào)錯(cuò)的地方
 /*部分業(yè)務(wù)代碼*/
})

debug 發(fā)現(xiàn)是觸發(fā)了 pointdown 事件，因?yàn)?event 沒有 touches 這個(gè)字段，導(dǎo)致拋出異常。但是之前用的好好的呀，難道是瀏覽器的 API 變化了？而且我也沒有了解過 pointerdown 事件，這個(gè)事件是用來處理什么的呢？于是我?guī)е鴥蓚€(gè)問題開啟了搜索之旅：

• 什么是 pointerdown 事件
• 為什么突然開始爆發(fā)錯(cuò)誤
  

聊聊 pointer events

查問題，最簡單的問題就是摟一遍 W3C 的官方文檔了。這里簡單說下我的理解。

設(shè)備輸入形式的多樣化

在 PC 時(shí)代，我們通過鼠標(biāo)與屏幕交互，這時(shí)候，我們?cè)O(shè)計(jì)系統(tǒng)時(shí)只需要考慮鼠標(biāo)事件就好了。但是如今，有很多新的設(shè)備，比如智能手機(jī)，平板電腦，他們包含了其他的輸入方式，比如觸摸，手寫筆，官方也為這些輸入形式都提供了新的事件。

但是對(duì)于開發(fā)者來說，這是件很麻煩的事，因?yàn)檫@意味著你需要為你的網(wǎng)頁適配各種事件，比如你要根據(jù)用戶的移動(dòng)來畫圖，你需要兼容 PC 和手機(jī)，你的代碼可能就會(huì)是下面這樣

dom.addEventListener('mousemove',
 draw);
dom.addEventListener('touchmove',
 draw);

如果需要兼容更多的輸入設(shè)備呢？比如手寫筆，這樣的話代碼就會(huì)很復(fù)雜。而且，為了兼容現(xiàn)有的基于鼠標(biāo)事件的代碼，很多瀏覽器都會(huì)為所有的輸入類型觸發(fā)鼠標(biāo)事件（例如在 touchmove 時(shí)觸發(fā) mousemove，我在 Chrome 試驗(yàn)了一下不會(huì)觸發(fā)，但是因?yàn)闆]有設(shè)備，手寫筆的情況沒有試），這也會(huì)導(dǎo)致無法確認(rèn)是否真的是鼠標(biāo)觸發(fā)的事件。

如何兼容多種輸入形式

為了解決這一系列的問題，W3C 定義了一種新的輸入形式，即 pointer。任何由鼠標(biāo)、觸摸、手寫筆或者其他輸入設(shè)備在屏幕上觸發(fā)的接觸，都算是 pointer 事件。

它的 API 和鼠標(biāo)事件很像，非常容易遷移。除了提供鼠標(biāo)事件常用的屬性，比如 clientX，target 等等，還提供了一些用于其他輸入設(shè)備的屬性，比如壓力，接觸面，傾斜角度等等，這樣開發(fā)者就可以利用 pointer 事件為所有的輸入設(shè)備開發(fā)自己的功能了！

提供的屬性

pointer 事件提供了一些特有的事件屬性

• pointerId：當(dāng)前指針事件的唯一標(biāo)識(shí)，主要是在多點(diǎn)觸控時(shí)標(biāo)識(shí)唯一的一個(gè)輸入源
• width：接觸面的寬度
• height：接觸面的高度
• pressure：接觸的壓力值，范圍是0-1，對(duì)于不支持壓力的硬件，比如鼠標(biāo)，按壓時(shí)該值必須為 0.5，否則為 0
• tiltX，titltY：手寫筆的角度
• pointerType：事件類型，目前有 mouse，pen，touch，如果是無法探測(cè)的指針類型，則該值為空字符串
• isPrimary：用于標(biāo)識(shí)是否是主指針，主要是在多點(diǎn)觸控中生效，開發(fā)者也可以通過忽略非主指針的指針事件來實(shí)現(xiàn)單點(diǎn)觸控。

如何確定主指針：

鼠標(biāo)輸入：一定是主指針

觸摸輸入：如果 pointerdown 觸發(fā)時(shí)沒有其他激活的觸摸事件，isPrimary 為 true

手寫筆輸入：與觸摸事件類似，pointerdown 觸發(fā)時(shí)沒有其他激活的 pointer 事件

相關(guān)事件

可以看到，pointer 事件與已知的事件類型基本一致，但是有一點(diǎn)區(qū)別：在觸摸屏上，我們可能會(huì)滑動(dòng)屏幕來觸發(fā)頁面滾動(dòng)，縮放或者刷新，對(duì)于 touch 事件，這時(shí)會(huì)觸發(fā) touchmove，但是對(duì)于 pointer 事件，當(dāng)觸發(fā)這些瀏覽器行為時(shí)，你卻會(huì)接收到 pointercancel 事件以便于通知你瀏覽器已經(jīng)接管了你的指針事件。

如何檢測(cè)

首先，pointer 事件的支持程度已經(jīng)很不錯(cuò)了，你可以使用 Pointer Events polyfill （本地下載）來進(jìn)行兼容，也可以自行檢測(cè)

if (window.PointerEvent) {
 // 支持
} else {
 // 不支持
}

導(dǎo)致問題的原因

這時(shí)候，對(duì)于本文一開始提到的問題就顯而易見了，因?yàn)?point events 是沒有 touches 這個(gè)屬性的。那么我們還有兩個(gè)問題。

為什么之前會(huì)用到 point events？

后來我看了下 zepto 的源碼，在事件處理時(shí)是考慮到了 point event 的，同事之前寫的代碼大概是參考了 zepto 的事件系統(tǒng)。

為什么會(huì)突然爆發(fā)這個(gè)問題？

很簡答，Chrome 55 開始支持這個(gè) API，Chrome 具體的支持信息可以參考官方日志，至于怎么檢測(cè)瀏覽器支持，可以參考上面的內(nèi)容

總結(jié)

對(duì)于開發(fā)來說，一定要鉆進(jìn)去，任何 bug 都是有原因的

代碼報(bào)錯(cuò)應(yīng)該有相應(yīng)的監(jiān)控機(jī)制，讓機(jī)器來幫我們發(fā)現(xiàn)問題，而不是靠人工去干預(yù)

好了，以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

參考

• https://www.w3.org/Submission/pointer-events/
• https://developers.google.com/web/updates/2016/10/pointer-events

最新評(píng)論