Home > Web Front-end > JS Tutorial > body text

Introduction to Gesture module in Zepto source code

一个新手
Release: 2017-09-25 09:28:07
Original
2308 people have browsed it

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)
Copy after login

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
}
Copy after login

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
})
Copy after login

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.

gesturechange

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

At

gesturechange, update the scaling value of the end point 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 = {}
}
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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template