zepto中的touch庫與fastclick

1、 touch庫實現了什么和引入背景

click事件在移動端上會有 300ms 的延遲，同時因為需要 長按 ， 雙觸擊 等富交互，所以我們通常都會引入類似 zepto 這樣的庫。zepto 中touch庫實現了 'swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown', 'doubleTap', 'tap', 'singleTap', 'longTap' 這樣一些功能。

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

if((_isPointerType = isPointerEventType(e, 'up')) &&
          !isPrimaryTouch(e)) return
        cancelLongTap()

    // 如果是 swipe，x 軸或者 y 軸移動超過 30px
    if ((touch.x2 && Math.abs(touch.x1 - touch.x2) > 30) ||
        (touch.y2 && Math.abs(touch.y1 - touch.y2) > 30))

      swipeTimeout = setTimeout(function() {
        touch.el.trigger('swipe')
        // swipeDirection 是判斷 swipe 方向的
        touch.el.trigger('swipe' + (swipeDirection(touch.x1, touch.x2, touch.y1, touch.y2)))
        touch = {}
      }, 0)

    // tap 事件
    else if ('last' in touch)
      if (deltaX < 30 && deltaY < 30) {
         // tapTimeout 是為了 scroll 的時候方便清除
        tapTimeout = setTimeout(function() {
          // 創建 tap 事件，並增加 cancelTouch 方法
          var event = $.Event('tap')
          event.cancelTouch = cancelAll
          touch.el.trigger(event)

          // 觸發 DoubleTap
          if (touch.isDoubleTap) {
            if (touch.el) touch.el.trigger('doubleTap')
            touch = {}
          }

          // singleTap （這個概念是相對於 DoubleTap 的，可以看看我們在最初的那段源碼解析中有這樣一段 if (delta > 0 && delta <= 250) touch.isDoubleTap = true ，所以 250 ms 之后沒有二次觸摸的就算是 singleTap 了 
          else {
            touchTimeout = setTimeout(function(){
              touchTimeout = null
              if (touch.el) touch.el.trigger('singleTap')
              touch = {}
            }, 250)
          }
        }, 0)
      } else {
        touch = {}
      }
      deltaX = deltaY = 0

touch庫對 touchstart, touchmove, touchend 做了一些封裝和判斷，然后通過 zepto 自己的事件體系來注冊和觸發。

3、fastclick 與 zepto

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

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

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

3.1、細說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.2、細說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 依然會不變，但不會冒泡。最佳實踐是將觸摸事件的監聽器綁定到這個元素本身, 防止元素被移除后, 無法再從它的上一級元素上偵測到從該元素冒泡的事件

大家有什么疑問，請多多留言哦！！！