Gesture 模塊基于 IOS 上的 Gesture 事件的封裝，利用 scale 屬性，封裝出 pinch 系列事件士八。

讀 Zepto 源碼系列文章已經放到了github上，歡迎star: reading-zepto

源碼版本

本文閱讀的源碼為 zepto1.2.0

GitBook

《reading-zepto》

整體結構

;(function($){
  if ($.os.ios) {
    var gesture = {}, gestureTimeout

    $(document).bind('gesturestart', function(e){
     ...
    }).bind('gesturechange', function(e){
      ...
    }).bind('gestureend', function(e){
     ...
    })

    ;['pinch', 'pinchIn', 'pinchOut'].forEach(function(m){
      $.fn[m] = function(callback){ return this.bind(m, callback) }
    })
  }
})(Zepto)

注意這里有個判斷 $.os.ios ，用來判斷是否為 ios 缨伊。這個判斷需要引入設備偵測模塊 Detect 摘刑。這個模塊利用 userAgent 來進行設備偵測，里面是一大堆正則表達式刻坊，所以這個模塊后面是不打算分析的了枷恕。

然后是監(jiān)測 gesturestart 、gesturechange谭胚、 gestureend 事件徐块，根據這三個事件，可以組合出 pinch 灾而、pinchIn 和 pinchOut 事件胡控。其實就是縮小和放大的手勢操作。

其中變量 gesture 對象和 Touch 模塊中的 touch 對象的作用差不多旁趟，可以先看看 《讀Zepto源碼之Touch模塊》對 Touch 模塊的分析昼激。

parentIfText

function parentIfText(node){
  return 'tagName' in node ? node : node.parentNode
}

這個輔助方法是獲取目標節(jié)點，如果節(jié)點不是元素節(jié)點锡搜，則用父節(jié)點作為目標節(jié)點橙困。如果事件在文本節(jié)點或者偽類元素上觸發(fā)時，會出現不是元素節(jié)點的情況耕餐。

事件

gesturestart

bind('gesturestart', function(e){
  var now = Date.now(), delta = now - (gesture.last || now)
  gesture.target = parentIfText(e.target)
  gestureTimeout && clearTimeout(gestureTimeout)
  gesture.e1 = e.scale
  gesture.last = now
})

如 Touch 模塊一樣凡傅，在 gesturestart 時，也用 delta 來記錄兩次 start 之間的時間間隔肠缔，用 gesture.target 來保存目標元素夏跷，e1 是起點時的縮放值。

gesturechange

bind('gesturechange', function(e){
  gesture.e2 = e.scale
})

在 gesturechange 時桩砰，更新終點 guesture.e2 的縮放值拓春。

gestureend

if (gesture.e2 > 0) {
  Math.abs(gesture.e1 - gesture.e2) != 0 && $(gesture.target).trigger('pinch') &&
    $(gesture.target).trigger('pinch' + (gesture.e1 - gesture.e2 > 0 ? 'In' : 'Out'))
  gesture.e1 = gesture.e2 = gesture.last = 0
} else if ('last' in gesture) {
  gesture = {}
}

如果 gesture.e2 存在（不可能有小于 0 的情況吧？）亚隅，在起點的縮放值和終點的縮放值不相同的情況下硼莽，觸發(fā) pinch 事件；如果起點的縮放值比終點的縮放值大煮纵，則繼續(xù)觸發(fā) pinchIn 事件懂鸵，則縮小效果；如果起點的縮放值比終點的縮放值小行疏，則繼續(xù)觸發(fā) pinchOut 事件匆光，即放大效果。

最終將 e1 酿联、 e2 和 last 都設置為 0 终息。

在 last 不存在的情況下（在調用 preventDefault 時）夺巩，將 gesture 清空。

系列文章

1. 讀Zepto源碼之代碼結構
2. 讀Zepto源碼之內部方法
3. 讀Zepto源碼之工具函數
4. 讀Zepto源碼之神奇的$
5. 讀Zepto源碼之集合操作
6. 讀Zepto源碼之集合元素查找
7. 讀Zepto源碼之操作DOM
8. 讀Zepto源碼之樣式操作
9. 讀Zepto源碼之屬性操作
10. 讀Zepto源碼之Event模塊
11. 讀Zepto源碼之IE模塊
12. 讀Zepto源碼之Callbacks模塊
13. 讀Zepto源碼之Deferred模塊
14. 讀Zepto源碼之Ajax模塊
15. 讀Zepto源碼之Assets模塊
16. 讀Zepto源碼之Selector模塊
17. 讀Zepto源碼之Touch模塊

參考

• 指尖下的js —— 多觸式web前端開發(fā)之三：處理復雜手勢

License

署名-非商業(yè)性使用-禁止演繹 4.0 國際 (CC BY-NC-ND 4.0)

作者：對角另一面