摘要：定位問題根據(jù)調(diào)用棧很快定位到了代碼，源碼定位到之前一位同事寫的組件代碼，大概是這樣的部分業(yè)務(wù)代碼報(bào)錯(cuò)的地方部分業(yè)務(wù)代碼發(fā)現(xiàn)是觸發(fā)了事件，因?yàn)闆]有這個(gè)字段，導(dǎo)致拋出異常。它的和鼠標(biāo)事件很像，非常容易遷移。

同步自我的博客，歡迎交流

這篇文章在草稿箱里躺了很久，因?yàn)樽罱钟龅搅讼嚓P(guān)問題，于是又整理了一下。請注意這里講的不是 css 的 pointer-events。

從某個(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

但是只有他的瀏覽器有問題，而且對功能毫無影響，本著在我的機(jī)器上不復(fù)現(xiàn)的精神（好吧，當(dāng)時(shí)比較忙），這個(gè)問題的優(yōu)先級排的不高，但是后面一段時(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ò)誤

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

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

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

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

如果需要兼容更多的輸入設(shè)備呢？比如手寫筆，這樣的話代碼就會很復(fù)雜。而且，為了兼容現(xiàn)有的基于鼠標(biāo)事件的代碼，很多瀏覽器都會為所有的輸入類型觸發(fā)鼠標(biāo)事件（例如在 touchmove 時(shí)觸發(fā) mousemove，我在 Chrome 試驗(yàn)了一下不會觸發(fā)，但是因?yàn)闆]有設(shè)備，手寫筆的情況沒有試），這也會導(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)識，主要是在多點(diǎn)觸控時(shí)標(biāo)識唯一的一個(gè)輸入源

width：接觸面的寬度

height：接觸面的高度

pressure：接觸的壓力值，范圍是0-1，對于不支持壓力的硬件，比如鼠標(biāo)，按壓時(shí)該值必須為 0.5，否則為 0

tiltX，titltY：手寫筆的角度

pointerType：事件類型，目前有 mouse，pen，touch，如果是無法探測的指針類型，則該值為空字符串

isPrimary：用于標(biāo)識是否是主指針，主要是在多點(diǎn)觸控中生效，開發(fā)者也可以通過忽略非主指針的指針事件來實(shí)現(xiàn)單點(diǎn)觸控。
如何確定主指針：

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

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

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

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

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

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

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

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

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

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

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

參考
https://www.w3.org/Submission...
https://developers.google.com...