一、引入

在一個專案demo中，實現單指觸控卡片的向任意方向的拖動效果。網上沒有現成的外掛，所以只好原生js來寫。產品要求需要禁止掉多點觸控。這個過程很讓人頭疼，試了很多方法，都不太實現。後來仔細研究，測試了一下移動端的三個常用事件。

二、事件

移動端的觸控事件常用的有一下三種：

touchstart:當有新手指觸控到繫結的元素，會觸發一次事件。

touchmove:當有手指放繫結的元素上會一直觸發，從觸發條件準確的說只有手指移動時才觸發。但是經過測試，這一項檢測十分靈敏，人為手指保持不動，系統也會偵測到細小的移動。所以會一直觸發。

touchend:當有手指從繫結元素上擡起，會觸發一次。

程式碼：

change.addEventListener('touchstart',function(e){
    if (e.touches.length != 1) {
    	//執行的程式碼A
    }else{
        //執行的程式碼B
    }
}, { passive: false });

ps：新增事件的第三個引數，參考我的另一篇部落格：https://blog.csdn.net/konghouy/article/details/83047376

我們在這裡主要關注回撥函式傳入的引數e，這個引數是瀏覽器偵測到事件的觸發，將觸發那一刻的一些觸發的資訊記錄了下來。e裡面比較重要的有三個屬性：

changedTouches：儲存了所有引發事件的手指資訊

targetTouches：儲存了當前物件上所有觸控點的列表;

touches：儲存了當前所有觸碰螢幕的手指資訊

陣列元素的屬性：

• identifier:表示每 1 個 Touch 物件 的獨一無二的 identifier。有了這個 identifier 可以確保你總能追蹤到這個 Touch物件。

• clientX:觸控點相對於覽器的 viewport左邊緣的 x 座標。不會包括左邊的滾動距離。

• clientY:觸控點相對於瀏覽器的 viewport上邊緣的 y 座標。不會包括上邊的滾動距離。

• pageX:觸控點相對於 document的左邊緣的 x 座標。 與 clientX 不同的是，他包括左邊滾動的距離，如果有的話。

• pageY:觸控點相對於 document的左邊緣的 y 座標。 與 clientY 不同的是，他包括上邊滾動的距離，如果有的話。

• target:總是表示 手指最開始放在觸控裝置上的觸發點所在位置的 element。 即使已經移出了元素甚至移出了document, 他表示的element仍然不變

需要注意的是

• 在多指觸控的時候，這裡的三個屬性都是陣列。陣列中儲存著對應的手指位置資訊。陣列的順序是是根據手指放上去的順序，先放上去的在陣列的前面。
• changedTouches：記錄了當前事件是由幾根手指觸發的，但是由於手機觸控十分靈敏，所以當一根手指放在元素上不動，另外一根手指移動。這時changeDTouches的值，一直在1,2閃動。（也就是說，不動的那根手指也可能會觸發事件）建議在開發中，不要使用changedTouches作為判斷依據。
• 在實際測試中，如果在手指按下後不擡起，移出了事件觸發的源物件，仍然會觸發回撥函式。

三、應用

通過對touch事件的判斷，即可增加對touch觸發條件的控制。可以識別多指觸控，讓瀏覽器實現不同的效果。

四、除錯問題

在PC瀏覽器上chrome控制檯，可以啟動手機模擬，用滑鼠模擬觸控，但是無法實現多點觸控模擬。而且相比真實觸控會因為微小的移動，導致連續touchmove，高精度的滑鼠不移動就不觸發touchmove。模擬真實度低。

當然也有解決方案，第一種使用支援多點觸控的電腦直接模擬輸入。或是用手機測試，將列印結果通過innerHTML寫入頁面中進行除錯。