Gesture 模組基於IOS 上的Gesture 事件的封裝，利用scale 屬性，封裝出pinch 系列事件。
本文所讀的原始碼為zepto1.2.0
《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 來進行裝置偵測，裡面是一大堆正規表示式，所以這個模組後面是不打算分析的了。
然後是監控gesturestart 、gesturechange、 gestureend 事件，根據這三個事件，可以組合出pinch 、pinchIn 和pinchOut 事件。其實就是縮小和放大的手勢操作。
其中變數gesture 物件和Touch 模組中的touch 物件的作用差不多，可以先看看《讀Zepto源碼之Touch模組》對Touch 模組的分析。
function parentIfText(node){
return 'tagName' in node ? node : node.parentNode
}這個輔助方法是取得目標節點，如果節點不是元素節點，就用父節點作為目標節點。如果事件在文字節點或偽類元素上觸發時，會出現不是元素節點的情況。
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 是起點時的縮放值。
bind('gesturechange', function(e){
gesture.e2 = e.scale
})在 gesturechange 時，更新終點 guesture.e2 的縮放值。
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 的情況吧？），在起點的縮放值和終點的縮放值不相同的情況下，觸發pinch 事件；如果起點的縮放值比終點的縮放值大，則繼續觸發pinchIn 事件，則縮小效果；如果起點的縮放值比終點的縮放值小，則繼續觸發pinchOut 事件，即放大效果。
最後將 e1 、 e2 和 last 都設為 0 。
在 last 不存在的情況下（在呼叫 preventDefault 時），將 gesture 清空。
以上是Zepto源碼中Gesture模組介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
