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中文網其他相關文章!