Le module
Gesture
est basé sur l'encapsulation de l'événement IOS
sur Gesture
et utilise l'attribut scale
pour encapsuler la série d'événements pinch
.
Le code source lu dans cet article est 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)
Notez qu'il y a ici un jugement $.os.ios
, qui sert à juger si c'est ios
. Cet arrêt nécessite l'introduction du module de détection d'appareil Detect
. Ce module utilise userAgent
pour la détection de périphériques, qui contient de nombreuses expressions régulières, ce module ne sera donc pas analysé plus tard.
Surveillez ensuite les événements gesturestart
, gesturechange
, gestureend
En fonction de ces trois événements, les événements pinch
, pinchIn
et pinchOut
peuvent être combinés. En fait, il s’agit d’une opération gestuelle de zoom avant et arrière.
L'objet variable gesture
a des fonctions similaires à l'objet Touch
dans le module touch
Vous pouvez d'abord consulter l'analyse du module Touch
dans "Touch Module Reading Zepto Source Code". .
function parentIfText(node){ return 'tagName' in node ? node : node.parentNode }
Cette méthode auxiliaire consiste à obtenir le nœud cible. Si le nœud n'est pas un nœud d'élément, utilisez le nœud parent comme nœud cible. Si l'événement est déclenché sur un nœud de texte ou un élément de pseudo-classe, il ne s'agira pas d'un nœud d'élément.
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 })
Tout comme le module Touch
, lorsque gesturestart
, delta
sert également à enregistrer le temps entre deux start
intervalle de temps, utilisez gesture.target
pour enregistrer l'élément cible, et e1
est la valeur de mise à l'échelle au point de départ.
bind('gesturechange', function(e){ gesture.e2 = e.scale })
À gesturechange
, mettez à jour la valeur de mise à l'échelle du point final 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 = {} }
Si gesture.e2
existe (il ne peut pas être inférieur à 0
, n'est-ce pas ?), lorsque la valeur d'échelle du point de départ et la valeur d'échelle de les points finaux sont différents, déclenchez l'événement pinch
; si la valeur de zoom du point de départ est supérieure à la valeur de zoom du point final, continuez à déclencher l'événement pinchIn
, et l'effet de zoom sera réduit si ; la valeur de zoom du point de départ est inférieure à la valeur de zoom du point final, continuez à déclencher l'événement pinchOut
, c'est-à-dire l'effet d'amplification.
définit finalement e1
, e2
et last
tous sur 0
.
Efface last
s'il n'existe pas (lorsque preventDefault
est appelé). gesture
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!