Home > Article > Web Front-end > Introduction to Gesture module in Zepto source code
Gesture
The module is based on the encapsulation of the Gesture
event on IOS
and uses the scale
attribute to encapsulate the pinch
Series of events.
The source code read in this article is 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)
Note that there is a judgment here $.os.ios
, which is used to judge whether it is ios
. This judgment requires the introduction of the device detection module Detect
. This module uses userAgent
to perform device detection, which contains a lot of regular expressions, so this module will not be analyzed later.
Then monitor gesturestart
, gesturechange
, gestureend
events. Based on these three events, pinch
can be combined , pinchIn
and pinchOut
events. In fact, it is a gesture operation of zooming in and out.
The variable gesture
object has similar functions to the touch
object in the Touch
module. You can first take a look at "Touch module reading Zepto source code" 》Analysis of Touch
module.
function parentIfText(node){ return 'tagName' in node ? node : node.parentNode }
This auxiliary method is to get the target node. If the node is not an element node, the parent node is used as the target node. If the event is triggered on a text node or pseudo-class element, it will not be an element node.
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 })
Like the Touch
module, delta## is also used when
gesturestart # To record the time interval between two
start, use
gesture.target to save the target element,
e1 is the scaling value at the starting point.
bind('gesturechange', function(e){ gesture.e2 = e.scale })
gesturechange, update the scaling value of the end point
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 exists (it cannot be smaller than
0, right?), the scaling value at the starting point and the end point When the zoom values are different, the
pinch event is triggered; if the zoom value of the starting point is larger than the zoom value of the end point, the
pinchIn event will continue to be triggered, and the zoom effect will be reduced; if the zoom value of the starting point is larger than the zoom value of the end point, the
pinchIn event will be triggered; If the zoom value is smaller than the zoom value of the end point, the
pinchOut
Finally
e1,
e2 and
last are all set to
0
Clear
gesture if
last does not exist (when
preventDefault
The above is the detailed content of Introduction to Gesture module in Zepto source code. For more information, please follow other related articles on the PHP Chinese website!