touch系事件

touch系事件概述

touch系事件是觸屏設備上的一系列事件，當用戶觸摸屏幕時及進行一系列操做時發生的事件。
包含touchstart, touchmove, touchend事件。

程序思路

咱們將焦點集中在事件這個抽象對象上去，例如當手指在觸摸屏上移動過程當中發生的touchmove事件，咱們去查找此事件相關的屬性，根據先後事件的發生（例如touchstart和touchend事件），去判斷是否符合程序觸發任務的條件（例如當用戶向上滑動時你要作一個頁面動畫）。

事件模式

須要指出的是，touch事件同其餘dom事件同樣（由於自己就屬於dom事件，只不過用在觸屏設備的新增html5事件而已），用addEventListener綁定，在事件處理時使用e.prevantDefault()來阻止默認事件執行（例如你在滾動div時，使用它來阻止頁面滾動），使用e.stopPropagation()來阻止事件向上冒泡，等等。

對象解釋

touchList：touch類對象組成的數組
touch對象:touch對象表示一個觸點，觸點屬性包含identifier, target, clientX/clientY, pageX/pageY, screenX/screenY, force（接觸面最小橢圓角度）/radiusX（接觸面最小橢圓X軸）/radiusY（接觸面最小橢圓Y軸）/rotationAngle(chrome上目前仍是帶有webkit前綴的webkitForce(壓力)/webkitRadiusX/webkitRadiusY/webkitRotationAngle), 其中identifier用來標識該觸點，由於屏幕上可能同時存在多個觸點。

事件解析

touchstart事件

一、發生條件：當用戶觸摸到屏幕時，發生touchstart事件。

實驗：

• 一根手指觸摸屏幕：
  此時觸發一個touchstart事件
• 兩根手指觸摸屏幕：
  前後發生兩個touchstart事件
  summary：touchstart是按觸摸點（嚴格說應該是分離的兩個觸摸點）來定義的。（關於觸發原理，這裏是臆想而已，這個問題已在知乎上提問，屆時更新）

二、屬性解析

• changedTouches屬性：
  一個touchList數組，表示該事件發生時發生改變的觸點，通常都是該觸點自己。
  此時來講說indetifier這個屬性吧：
  實驗：
  一、一根手指Fa觸發touchstart，該對象的identifier爲0；
  二、放上手指Fb, 此時觸發第二個touchstart事件，identifier爲1；
  三、再放上Fc，此時觸發第三個touchstart事件，identifier爲2；
  四、再放上Fd，此時觸發第四個touchstart事件，identifier爲3；
  五、此時把Fa擡起，放上Fe, 此時觸發第五的touchstart事件，identifier爲0；
  六、此時把Fd擡起，放上Ff，此時觸發第六個tounchstart事件，identifier爲3；
  summary:標識會自動填上從0開始且不存在的identifier，因此以indentifier來標識觸摸點時要注意這一點。
• touches屬性：
  一 個 TouchList 對象，包含了全部當前接觸觸摸平面的觸點的 Touch 對象，不管它們的起始於哪一個element 上，也不管它們狀態是否發生了變化。【摘自https://developer.mozilla.org】
• targetTouches屬性：
  一個 TouchList 對象，是包含了以下觸點的 Touch 對象：觸摸起始於當前事件的目標 element 上，而且仍然沒有離開觸摸平面的觸點.【摘自https://developer.mozilla.org】
  targetTouches和touches聯合起來作一個實驗：
  一、在div#test上綁定touchstart事件；
  二、Fa放置在div#test, 觸發一次touchstart；
  三、Fb放置在div#test之外的body上；
  四、Fc觸發一次div#test上的觸屏並當即擡起；
  五、Fd觸發一次div#test上的touchstart；
  現象：此時咱們觀察兩個Fa觸發的touchstart事件對象和Fd觸發的touchstart事件對象：
  Fa的touchstart中touches和targetTouches對象都僅僅包含一個touch對象，對應Fa的觸摸點。
  Fd的touchstart中touches和targetTouches對象是同樣的，包含兩個touch對象，分別是Fa和Fd對應的觸摸點。

touchmove事件

當觸摸點在觸摸平面上移動時，觸發touchmove事件。
實驗：

• 再次拿出touch對象，但這時咱們實驗一下touch對象的target屬性：
  簡單地讓Fa從div#test滑出到body區域
  過程當中咱們記錄了touchmove事件，爲簡單起見，咱們查看最後一個touchmove的事件對象，咱們發現：
  現象：此時的changedTouches中的touch對象的target爲div#test，因此target屬性指的是觸發事件時所在的元素；
  咱們在此又發現一個現象：
  從始至終，這一系列的touchmove事件都會觸發div#test上的touchmove事件回調；

• 旨在觀察當move過程當中刪除div#test的狀況。代碼以下：
  ```javascript
  var test=document.getElementById('test');

window.addEventListener('touchmove',function(e){
console.log('move on the window');
console.log(e);
},false);

test.addEventListener('touchmove',function(e){
e.preventDefault();
//e.stopPropagation();
console.log('move on the test');
console.log(e);
if(e.changedTouches[0].clientY>420){
//由於該測試中div#test的高度爲400px且起點爲(0,0)
if(test.parentNode){
test.parentNode.removeChild(test);
console.log('remove')
}
}
},false);
```
咱們依然簡單地讓Fa從div#test滑出到body區域。
現象：在控制檯上能夠看出：

當div#test被刪除後，只執行了div#test上的touchmove, 但已經再也不冒泡到window。
注意：remove打印出來以前，事件已經冒泡到了window，因此隨後有一個window的touchend的回調被執行。

touchend事件

當觸摸點離開屏幕時觸發touchend事件。
實驗：

• 在div#test上觸屏後離開，觸點無移動
  現象：觸發div#test的touchend事件

• 在div#test上滑動，且過程當中沒有離開div#test
  現象：不會觸發touchend事件

• 在div#test上滑動，且最終中止到body上並擡起手指
  現象：不會觸發touchend事件

來自爲知筆記(Wiz)