怎樣使用Point事件

但是只有他的瀏覽器有問題，而且對功能毫無影響，本著在我的機器上不復現的精神（好吧，當時比較忙），這個問題的優先級排的不高，但是后面一段時間慢慢有人也出現相同的問題，于是我開始在意這個問題了。

定位問題

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

dom.on('touchstart pointerdown', function (event) {
 /*部分業務代碼*/
 var touch = event.touches[0]; //報錯的地方
 /*部分業務代碼*/
})

debug 發現是觸發了 pointdown 事件，因為 event 沒有 touches 這個字段，導致拋出異常。但是之前用的好好的呀，難道是瀏覽器的 API 變化了？而且我也沒有了解過 pointerdown 事件，這個事件是用來處理什么的呢？于是我帶著兩個問題開啟了搜索之旅：

聊聊 pointer events

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

設備輸入形式的多樣化

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

但是對于開發者來說，這是件很麻煩的事，因為這意味著你需要為你的網頁適配各種事件，比如你要根據用戶的移動來畫圖，你需要兼容 PC 和手機，你的代碼可能就會是下面這樣

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

如果需要兼容更多的輸入設備呢？比如手寫筆，這樣的話代碼就會很復雜。而且，為了兼容現有的基于鼠標事件的代碼，很多瀏覽器都會為所有的輸入類型觸發鼠標事件（例如在 touchmove 時觸發 mousemove，我在 Chrome 試驗了一下不會觸發，但是因為沒有設備，手寫筆的情況沒有試），這也會導致無法確認是否真的是鼠標觸發的事件。

如何兼容多種輸入形式

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

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

提供的屬性

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

如何確定主指針：

鼠標輸入：一定是主指針

觸摸輸入：如果 pointerdown 觸發時沒有其他激活的觸摸事件，isPrimary 為 true

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

相關事件

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

如何檢測

首先，pointer 事件的支持程度已經很不錯了，你可以使用 Pointer Events polyfill （本地下載）來進行兼容，也可以自行檢測

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

導致問題的原因

這時候，對于本文一開始提到的問題就顯而易見了，因為 point events 是沒有 touches 這個屬性的。那么我們還有兩個問題。

為什么之前會用到 point events？

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

為什么會突然爆發這個問題？

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

相信看了本文案例你已經掌握了方法，更多精彩請關注Gxl網其它相關文章！

推薦閱讀：

怎樣使用Vue中字符串模板

如何處理Mac安裝thrift因bison報錯

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com