解釋touch

1. touch是移動端的觸控事件 而且是一組事件
2. touchstart 當手指觸控式螢幕幕的時候觸發
3. touchmove 當手指在螢幕上滑動時觸發:move事件是持續觸發
4. touchend 當手指離開螢幕的時候觸發
5. touchcancel 當被迫終止滑動的時候觸發（來電，彈訊息等觸碰意外）

繫結事件

使用addEventListener進行繫結,如下

var ul = document.querySelector('ul')
ul.addEventListener('touchstart',function(e){
		console.
 
log(e)
	})

事件物件

當開始點選列印的事件物件如下圖

1. TouchList

一個 TouchList 代表一個觸控平面上所有觸點的列表; 舉例來講, 如果一個使用者用三根手指接觸螢幕(或者觸控板), 與之相關的TouchList 對於每根手指都會生成一個 Touch 物件, 共計三個.

觸控點（一個手指觸控就是一個觸發點，和螢幕的接觸點的個數）的集合

targetTouches && touches的區別

1. targetTouches

一個TouchList，包含所有仍與觸控平面接觸並且touchstart事件與當前事件在同一個目標元素上（ target element ）發生的Touch物件。

• 語法

var touches = touchEvent.targetTouches;

console.log(e.targetTouches)

2. touches

一個 TouchList，其會列出所有當前在與觸控表面接觸的 Touch 物件，不管觸控點是否已經改變或其目標元素是在處於 touchstart 階段。

3. 相同
   當手指處於 touchend，離開觸控表面

ul.addEventListener('touchend',function(e){
		console.log(e.targetTouches)
		console.
 
log(e.touches)
	})

• 可見：在離開螢幕的時候兩者無法記錄觸控點
• 當處於touch事件中也可見：都可以獲得一個TouchList列表，裡面包含了觸碰點的資訊。

4. 區別

• 這兩個在測試時同位置看似列印結果是一致的，只是因為用一根手指點選
• 如果我用兩個手指，一個觸控繫結事件的ul（目標元素），另一個觸控除了此ul的其他地方，那麼touches和targetTouches就是有區別的了
  touches依舊可以獲得兩個觸控點的資訊列表，而targetTouches只能獲取一個觸控點的資訊列表，（即繫結事件的ul（目標手指）上的那個觸控點）。
• targetTouches只能獲取到在其目標元素所有手指的觸碰物件，而touches只要有手指在目標元素上，螢幕上其它觸碰點也能獲取到

changedTouches

每個事件都會記錄； 當手指鬆開時候(touchend)，意味著當前元素上已經沒有手指物件了,所以無法通過targetTouches來獲取手指物件，則這時候要使用changedTouches

其它觸碰物件

click

click會有200ms到300ms的延遲，所以我們在使用的時候可以進行封裝，或則使用zepto.js的tap來實現點選