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 pinchSeries of events.

Source code version

The source code read in this article is zepto1.2.0

GitBook

《reading-zepto》

Overall structure

;(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.

parentIfText

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.

Event

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
})

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
})

Copy after login

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 = {}
}

Copy after login

If

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

event will continue to be triggered, that is, the zoom effect.

Finally e1, e2 and last are all set to 0

.

Clear gesture if last does not exist (when preventDefault

is called). ###

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!