移動端有四個關於觸摸的事件，分別是touchstart、touchmove、touchend、touchcancel（比較少用）, 它們的觸發順序是touchstart-->touchmove-->touchend-->click，所以touch事件觸發完成后會接着觸發click事件，需要注意一下 ，阻止一下事件冒泡就可以了。
touch事件可以產生一個event對象，這個event對象除基本的一些屬性外還附帶了三個額外的屬性：
touches
一個TouchList對象，包含當前所有屏幕上的觸點的Touch對象，該屬性不一定是當前元素的touchstart事件觸發，需要注意。
targetTouches
也是一個TouchList對象，包含從當前元素touchstart事件觸發的的觸點的Touch對象，跟上面的touches區別於觸發點不一樣。
changedTouches
也是一個TouchList對象，對於touchstart事件, 這個TouchList對象列出在此次事件中新增加的觸點。對於touchmove事件，列出和上一次事件相比較，發生了變化的觸點。對於touchend，列出離開觸摸平面的觸點（這些觸點對應已經不接觸觸摸平面的手指）。
touchend
這里要特別注意，touches和targetTouches只存儲接觸屏幕的觸點，touchend時，touches和targetTouches是個空數組，所以要獲取觸點最后離開的狀態要使用changedTouches。
Touch和TouchList
由Touch對象構成的數組，通過event.touches、event.targetTouches或者event.changedTouches取到。一個 Touch 對象代表一個觸點，當有多個手指觸摸屏幕時，TouchList就會存儲多個Touch對象。Touch對象代表一個觸點，可以通過TouchList[0]獲取， 每個觸點包含位置，大小，形狀，壓力大小，和目標 element屬性。本文中只使用到Touch.pageX和Touch.pageY屬性，更多介紹可以查看Touch屬性介紹。
touches, targetTouches, changedTouches 區別
1. touches: A list of information for every finger currently touching the screen
2. targetTouches: Like touches, but is filtered to only the information for finger touches that started out within the same node
3. changedTouches: A list of information for every finger involved in the event (see below) To better understand what might be in these lists, let’s go over some examples quickly
They vary in the following pattern:
1. When I put a finger down, all three lists will have the same information. It will be in changedTouches because putting the finger down is what caused the event.
第一根手指觸摸屏幕，三個事件獲取的值相同。
2. When I put a second finger down, touches will have two items, one for each finger. targetTouches will have two items only if the finger was placed in the same node as the first finger. changedTouches will have the information related to the second finger, because it’s what caused the event
第二根手指觸摸屏幕，此時touches獲取兩個觸摸點的信息。若觸摸點在同一個對象上，targetTouches也獲取兩個觸摸點的信息。changedTouches只保存第二個觸摸點的信息。
3. If I put two fingers down at exactly the same time, it’s possible to have two items in changedTouches, one for each finger
若同時用兩根手指觸摸屏幕，changedTouches 有兩個列表分別表示兩個觸摸點的信息。
4. If I move my fingers, the only list that will change is changedTouches and will contain information related to as many fingers as have moved (at least one)
如果移動觸摸點，只有 changedTouches 會記錄每個移動的觸摸點信息
5. When I lift a finger, it will be removed from touches, targetTouches and will appear in changedTouches since it’s what caused the event
當一個觸摸點離開，它的信息列表將從touches，targetTouches移除，但是changedTouches會保存此觸摸點信息。
6. Removing my last finger will leave touches and targetTouches empty, and changedTouches will contain information for the last finger
最后一個觸摸點離開，touches，targetTouches變成空值，而 changedTouches保存着最后一個離開的觸摸點信息。
移動距離計算
基本知識介紹完，距離的計算方法也差不多很明確了，主要用到了Touch對象中的pageX和pageY屬性，終點位置減開始位置即可獲得。 代碼如下：
var startX = startY = endX = endY = 0; var dom = document.getElementById('main'); //touchStart事件 dom.addEventListener('touchstart',function(event){ var touch = event.targetTouches[0]; startX = touch.pageX; startY = touch.pageY; document.getElementById('start').value = startX + '，' + startY; },false); //touchmove事件 dom.addEventListener('touchmove',function(event){ var touch = event.targetTouches[0]; endX = touch.pageX; endY = touch.pageY; },false); //touchend事件 dom.addEventListener('touchend',function(event){ document.getElementById('end').value = endX + '，' + endY; document.getElementById('count').value = (endX - startX) + '，' + (endY - startY); },false);