zepto中的touch庫與fastclick

一、 touch庫實現了什麼和引入背景

click事件在移動端上會有 300ms 的延遲，同時由於須要 長按 ， 雙觸擊 等富交互，因此咱們一般都會引入相似 zepto 這樣的庫。zepto 中touch庫實現了 'swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown', 'doubleTap', 'tap', 'singleTap', 'longTap' 這樣一些功能。

二、touch庫實現'swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown', 'doubleTap', 'tap', 'singleTap', 'longTap'重要源代碼（綁定在touchend事件上）

 1 if((_isPointerType = isPointerEventType(e, 'up')) &&
 2           !isPrimaryTouch(e)) return
 3         cancelLongTap()
 4 
 5     // 若是是 swipe，x 軸或者 y 軸移動超過 30px
 6     if ((touch.x2 && Math.abs(touch.x1 - touch.x2) > 30) ||
 7         (touch.y2 && Math.abs(touch.y1 - touch.y2) > 30))
 8 
 9       swipeTimeout = setTimeout(function() {
10         touch.el.trigger('swipe')
11         // swipeDirection 是判斷 swipe 方向的
12         touch.el.trigger('swipe' + (swipeDirection(touch.x1, touch.x2, touch.y1, touch.y2)))
13         touch = {}
14       }, 0)
15 
16     // tap 事件
17     else if ('last' in touch)
18       if (deltaX < 30 && deltaY < 30) {
19          // tapTimeout 是爲了 scroll 的時候方便清除
20         tapTimeout = setTimeout(function() {
21           // 建立 tap 事件，並增長 cancelTouch 方法
22           var event = $.Event('tap')
23           event.cancelTouch = cancelAll
24           touch.el.trigger(event)
25 
26           // 觸發 DoubleTap
27           if (touch.isDoubleTap) {
28             if (touch.el) touch.el.trigger('doubleTap')
29             touch = {}
30           }
31 
32           // singleTap （這個概念是相對於 DoubleTap 的，能夠看看咱們在最初的那段源碼解析中有這樣一段 if (delta > 0 && delta <= 250) touch.isDoubleTap = true ，因此 250 ms 以後沒有二次觸摸的就算是 singleTap 了 
33           else {
34             touchTimeout = setTimeout(function(){
35               touchTimeout = null
36               if (touch.el) touch.el.trigger('singleTap')
37               touch = {}
38             }, 250)
39           }
40         }, 0)
41       } else {
42         touch = {}
43       }
44       deltaX = deltaY = 0

touch庫對 touchstart, touchmove, touchend 作了一些封裝和判斷，而後經過 zepto 本身的事件體系來註冊和觸發。

三、fastclick 與 zepto

fastclick解決了zepto的點透問題，同時也解決了click的300ms延遲問題。

zepto 是一個移動端的 js 庫，而 fastclick 專一於 click 在移動端的觸發問題。

zepto 和 fastclick 都有用到 touchEvent，可是 zepto 當中用的是 e.touches而 fastclick 卻用的是 e.targetTouches。

3.一、細說touchEvent

屬性：

(1). TouchEvent.changedTouches 一個 TouchList 對象，包含了表明全部從上一次觸摸事件到這次事件過程當中，狀態發生了改變的觸點的 Touch 對象。

(2). TouchEvent.targetTouches 一個 TouchList 對象，是包含了以下觸點的 Touch 對象：觸摸起始於當前事件的目標 element 上，而且仍然沒有離開觸摸平面的觸點.

(3). TouchEvent.touches 一個 TouchList 對象，包含了全部當前接觸觸摸平面的觸點的 Touch 對象，不管它們的起始於哪一個 element 上，也不管它們狀態是否發生了變化。

(4). TouchEvent.type 這次觸摸事件的類型，可能值爲 touchstart, touchmove, touchend 等等

(5). TouchEvent.target 觸摸事件的目標 element，這個目標元素對應 TouchEvent.changedTouches 中的觸點的起始元素。

(6). TouchEvent.altKey, TouchEvent.ctrlKey, TouchEvent.metaKey, TouchEvent.shiftKey 觸摸事件觸發時，鍵盤對應的鍵（例如 alt ）是否被按下。

3.二、細說TouchList 與 Touch

TouchList 就是一系列的 Touch，經過 TouchList.length 能夠知道當前有幾個觸點， TouchList[0] 或者 TouchList.item(0) 用來訪問第一個觸點。

屬性：

(1). Touch.identifier ：touch 的惟一標誌，整個 touch 過程當中（也就是 end 以前）不會改變

(2). Touch.screenX 和 Touch.screenY ：座標原點爲屏幕左上角

(3). Touch.clientX 和 Touch.clientY ：座標原點在當前可視區域左上角，這兩個值不包含滾動偏移

(4). Touch.pageX 和 Touch.pageY ：座標原點在HTML文檔左上角，這兩個值包含了水平滾動的偏移

(5). Touch.radiusX 和 Touch.radiusY ：觸摸平面的最小橢圓的水平軸(X軸)半徑和垂直軸(Y軸)半徑

(6). Touch.rotationAngle ：觸摸平面的最小橢圓與水平軸順時針夾角

(7). Touch.force ：壓力值 0.0-1.0

(8). Touch.target ：Touch相關事件觸發時的 element 不會隨 move 變化。若是 move 當中該元素被刪掉，這個 target 依然會不變，但不會冒泡。最佳實踐是將觸摸事件的監聽器綁定到這個元素自己, 防止元素被移除後, 沒法再從它的上一級元素上偵測到從該元素冒泡的事件

你們有什麼疑問，請多多留言哦！！！