1. 爲什麼移動端使用touch事件
習慣在電腦上寫js代碼的同學可能想問一個問題：爲什麼移動端要使用touch事件，mouse事件和click事件在手機上不能觸發麼？其實這個問題很容易解決。首先，這兩類事件在移動端也可以觸發，但分別有一些問題：移動端會多點觸屏，不適合mouse ，而click事件在手機上有 300ms延遲（不是bug）。因此，在移動端綁定事件，最好使用專門爲移動端設計的touch事件。
2. touch事件介紹
觸摸事件有以下幾種類型：touchstart,touchmove,touchend這三種用的比較多，還有不常用的touchcancel事件。當然 MDN上還介紹了touchenter,touchleave事件，具體適用的場景及兼容性如何還未做測試，感興趣的可自行研究。
js中不同的事件類型，event對象包含的屬性也有所差異。我們先了解幾個TouchEvent涉及的對象。
提示：文中的demo都是在 chrome 模擬器，iPhone6s(iOS9.3.2) safari，iOS微信上運行，安卓的兼容性未做測試
Touch
Touch對象代表一個觸點，可以通過event.touches[0]獲取，每個觸點包含位置，大小，形狀，壓力大小，和目標 element屬性。
{
screenX: 511,
screenY: 400,//觸點相對於屏幕左邊沿的Y座標
clientX: 244.37899780273438,
clientY: 189.3820037841797,//相對於可視區域
pageX: 244.37,
pageY: 189.37,//相對於HTML文檔頂部，當頁面有滾動的時候與clientX=Y 不等
force: 1,//壓力大小，是從0.0(沒有壓力)到1.0(最大壓力)的浮點數
identifier: 1036403715,//一次觸摸動作的唯一標識符
radiusX: 37.565673828125, //能夠包圍用戶和觸摸平面的接觸面的最小橢圓的水平軸(X軸)半徑
radiusY: 37.565673828125,
rotationAngle: 0,//它是這樣一個角度值：由radiusX 和 radiusY 描述的正方向的橢圓，需要通過順時針旋轉這個角度值，才能最精確地覆蓋住用戶和觸摸平面的接觸面
target: {} // 此次觸摸事件的目標element
}identifier
這個屬性大家可能有疑惑，使用 Chrome 的模擬器發現多次觸摸動作，值始終不變。用真機測試則不會有問題(我這裏用的safari連接mac調試)。每次觸摸包括start,move,end這整個過程，標誌符都不變。下一次觸摸動作開始，標誌符就會變化。
screenY clientY
在 safari 中 screenY與clientY值是相等的，在iOS微信中兩個數值不等，但單位應該也不一樣。
radiusX radiusY rotationAngle
測試過程中safari及微信內置瀏覽器都不支持這些屬性，chrome模擬器可以。
TouchList
由Touch對象構成的數組，通過event.touches取到。一個Touch對象代表一個觸點，當有多個手指觸摸屏幕時，TouchList就會存儲多個Touch對象，前面說到的identifier就用來區分每個手指對應的Touch對象。
TouchEvent
TouchEvent就是用來描述手指觸摸屏幕的狀態變化事件，除了一般DOM事件中event對像具備的屬性，還有一些特有的屬性。
touches
一個TouchList對象，包含當前所有接觸屏幕的觸點的Touch對象，不論 touchstart 事件從哪個elment上觸發。
targetTouches
也是一個TouchList對象，包含了如下觸點的 Touch 對象：touchstart從當前事件的目標element上觸發
這裏大家可能產生了疑惑，這兩個對象到底有什麼區別？尤其是我們使用chrome模擬器中運行 demo,打印兩個對象發現他們其實是一樣的。
這兩個對象的區別可以類比event.target與event.currentTarget 的區別，如果以前沒留意，自行 js 高級程序設計。
touch相關的事件是一個整體，一開始touchstart不可能被觸發，則後續touch事件也不會被觸發。當然你可以不監聽 touchstart 事件，按照操作一 touchmove，touchend 還是可以觸發的。
touchend這裏要特別注意，touches和targetTouches只存儲接觸屏幕的觸點，要獲取觸點最後離開的狀態要使用changedTouches。
之前也經常用touches[0]來獲取Touch 對象，如果知道了 touches，targetTouches,changedTouches 的不同之處。在編寫代碼時可以更好的選擇使用，程序也可以更嚴謹。
