移動端事件對象touches的誤區

不想長篇大論，也是本身遺留下的一個錯誤的理解

在移動端觸屏事件有四個

// 手勢事件
touchstart  //當手指接觸屏幕時觸發
touchmove   //當已經接觸屏幕的手指開始移動後觸發
touchend    //當手指離開屏幕時觸發

固然還有個touchcancel事件，可是我測試後，並沒發現有什麼卵用

每一個觸摸事件對象中都包括了touches這個屬性，用於描述前位於屏幕上的全部手指的一個列表

那麼獲取當前事件對象咱們習慣性的使用  event = event.touches[0] ，我記得在不少年前事件對象必須在touches中獲取才能夠

在單指操做中，event.touches[0] 是沒問題的，貌似正確的這個寫法就一直遺留下來了

 

直到遇到了這樣一個效果：模擬支付寶快捷支付的鍵盤~

移動端由於僞類:active失效的問題，我才用了JS動態處理active的效果

問題就出現了：多個手指同時操做，active亂套了

簡單描述下問題：

1-9數字鍵盤

1. 單指經過按下數字1，按住不鬆手，再單指按住數字2，按下並鬆手，此時觸發了數字1
2. 同時按下2個數字鍵，鬆手後2個touchend都丟失，不響應了

 

測試的結果：測試手機 iphone 6 plus 、 安卓酷派

 

先看單指操做，touchstart 與touchend 的處理，按下數字1後鬆手

[LOG] : start的手指數量: 1
[LOG] : start touches對象的textContent值 :1
[LOG] : 當前start手指對應的textContent值: 1
[LOG] : 

[LOG] : end的手指數量: 0
[LOG] : 當前end手指對應的textContent值: 1

觀察：

touchstart ：

e.touches.length 的長度是1

touches列表中只有一個 事件對象，而且對應的值是1

直接經過e.traget.textContent 獲取的值也是1

touchend ：

e.touches.length 的長度是0

touches列表由於沒有長度，由於沒有值

直接經過e.traget.textContent 獲取的值也是1

 

 

三根手指操做：touchstart 與touchend 的處理

按下的順序： 數字鍵 1,2,3

鬆手的順序： 數字鍵 3,2,1，

touchstart  數字鍵 1,2,3

[LOG] : start的手指數量: 1
[LOG] : start touches對象的textContent值 :1
[LOG] : 當前start手指對應的textContent值: 1
[LOG] : 

[LOG] : start的手指數量: 2
[LOG] : start touches對象的textContent值 :1
[LOG] : start touches對象的textContent值 :2
[LOG] : 當前start手指對應的textContent值: 2
[LOG] : 

[LOG] : start的手指數量: 3
[LOG] : start touches對象的textContent值 :1
[LOG] : start touches對象的textContent值 :2
[LOG] : start touches對象的textContent值 :3
[LOG] : 當前start手指對應的textContent值: 3

e.touches.length 的長度是隨着手指的觸點增長而遞增

e.touches列表中保留了全部觸發手勢的事件對象的總數

直接經過e.traget.textContent 獲取的是當前的元素對象的值

 

touchend 數字鍵 3,2,1，

[LOG] : end的手指數量: 2
[LOG] : end touches對象的textContent值 :1
[LOG] : end touches對象的textContent值 :2
[LOG] : 當前end手指對應的textContent值: 3
[LOG] : 

[LOG] : end的手指數量: 1
[LOG] : end touches對象的textContent值 :1
[LOG] : 當前end手指對應的textContent值: 2
[LOG] : 

[LOG] : end的手指數量: 0
[LOG] : 當前end手指對應的textContent值: 1

e.touches.length 的長度是隨着手指的觸發減小

touches列表中保留了全部觸發手勢的事件對象的總數

直接經過e.traget.textContent 獲取的是當前的元素對象的值

 

總結：

e.touches確實能保留全部觸發點的事件對象

touchend 事件中獲得的是一個touches的最終值，也就是delete後的列表，因此獲取到的touches.length已經減小了，至關於--touches的處理後結果

touches[0] 並不能獲取到當前的指向的手勢，由於是一個列表，不能肯定是哪一個一個引用

 

最終仍是經過e.traget取值就能夠了。。。。。