Comment utiliser la pénétration d'événements Tap Zepto et la pénétration de points (avec code)-js tutoriel-php.cn

Cette fois, je vais vous montrer comment utiliser l'événement Tap Zepto pour pénétrer et pénétrer (avec le code). Quelles sont les choses à noter concernant l'utilisation de l'événement Tap Zepto pour pénétrer et pénétrer ? C'est un cas pratique, jetons-y un coup d'œil.

Tout d’abord, qu’est-ce que la pénétration des événements zepto tap ?

La pénétration de l'événement Tap signifie qu'il existe des événements de liaison sur plusieurs niveaux. Le niveau supérieur est lié à l'événement Tap et le niveau inférieur est lié à l'événement Click. L'événement est exécuté, les événements de niveau inférieur seront déclenchés et la pénétration de l'événement se produira. Si la couche inférieure est une balise d'entrée , elle doit pénétrer.

La raison :

est parce que zepto implémente l'événement tap qui doit être déclenché lorsqu'il apparaît dans le document, c'est-à-dire le tap l'événement est Il est lié au document et l'événement click a retardé l'exécution.

Ci-dessous, nous publions le code source de l'événement tap zepto.1.1.6 :

<span style="font-size: 14px;">;(function($){<br>    var touch = {},<br>        touchTimeout, tapTimeout, swipeTimeout, longTapTimeout,<br>        longTapDelay = 750,<br>        gesture<br>    function swipeDirection(x1, x2, y1, y2) {<br>        return Math.abs(x1 - x2) >=<br>            Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down')<br>    }<br>    function longTap() {<br>        longTapTimeout = null<br>        if (touch.last) {<br>            touch.el.trigger('longTap')<br>            touch = {}<br>        }<br>    }<br>    function cancelLongTap() {<br>        if (longTapTimeout) clearTimeout(longTapTimeout)<br>        longTapTimeout = null<br>    }<br>    function cancelAll() {<br>        if (touchTimeout) clearTimeout(touchTimeout)<br>        if (tapTimeout) clearTimeout(tapTimeout)<br>        if (swipeTimeout) clearTimeout(swipeTimeout)<br>        if (longTapTimeout) clearTimeout(longTapTimeout)<br>        touchTimeout = tapTimeout = swipeTimeout = longTapTimeout = null<br>        touch = {}<br>    }<br>    function isPrimaryTouch(event){<br>        return (event.pointerType == 'touch' ||<br>            event.pointerType == event.MSPOINTER_TYPE_TOUCH)<br>            && event.isPrimary<br>    }<br>    function isPointerEventType(e, type){<br>        return (e.type == 'pointer'+type ||<br>            e.type.toLowerCase() == 'mspointer'+type)<br>    }<br>    $(document).ready(function(){<br>        var now, delta, deltaX = 0, deltaY = 0, firstTouch, _isPointerType<br>        if ('MSGesture' in window) {<br>            gesture = new MSGesture()<br>            gesture.target = document.body<br>        }<br>        $(document)<br>            .bind('MSGestureEnd', function(e){<br>                var swipeDirectionFromVelocity =<br>                        e.velocityX > 1 ? 'Right' : e.velocityX < -1 ? &#39;Left&#39; : e.velocityY > 1 ? 'Down' : e.velocityY < -1 ? &#39;Up&#39; : null;<br/>                if (swipeDirectionFromVelocity) {<br/>                    touch.el.trigger(&#39;swipe&#39;)<br/>                    touch.el.trigger(&#39;swipe&#39;+ swipeDirectionFromVelocity)<br/>                }<br/>            })<br/>            .on(&#39;touchstart MSPointerDown pointerdown&#39;, function(e){<br/>                if((_isPointerType = isPointerEventType(e, &#39;down&#39;)) &&<br/>                    !isPrimaryTouch(e)) return<br/>                firstTouch = _isPointerType ? e : e.touches[0]<br/>                if (e.touches && e.touches.length === 1 && touch.x2) {<br/>                    // Clear out touch movement data if we have it sticking around<br/>                    // This can occur if touchcancel doesn&#39;t fire due to preventDefault, etc.<br/>                    touch.x2 = undefined<br/>                    touch.y2 = undefined<br/>                }<br/>                now = Date.now()<br/>                delta = now - (touch.last || now)<br/>                touch.el = $(&#39;tagName&#39; in firstTouch.target ?<br/>                    firstTouch.target : firstTouch.target.parentNode)<br/>                touchTimeout && clearTimeout(touchTimeout)<br/>                touch.x1 = firstTouch.pageX<br/>                touch.y1 = firstTouch.pageY<br/>                if (delta > 0 && delta <= 250) touch.isDoubleTap = true<br/>                touch.last = now<br/>                longTapTimeout = setTimeout(longTap, longTapDelay)<br/>                // adds the current touch contact for IE gesture recognition<br/>                if (gesture && _isPointerType) gesture.addPointer(e.pointerId);<br/>            })<br/>            .on(&#39;touchmove MSPointerMove pointermove&#39;, function(e){<br/>                if((_isPointerType = isPointerEventType(e, &#39;move&#39;)) &&<br/>                    !isPrimaryTouch(e)) return<br/>                firstTouch = _isPointerType ? e : e.touches[0]<br/>                cancelLongTap()<br/>                touch.x2 = firstTouch.pageX<br/>                touch.y2 = firstTouch.pageY<br/>                deltaX += Math.abs(touch.x1 - touch.x2)<br/>                deltaY += Math.abs(touch.y1 - touch.y2)<br/>            })<br/>            .on(&#39;touchend MSPointerUp pointerup&#39;, function(e){<br/>                if((_isPointerType = isPointerEventType(e, &#39;up&#39;)) &&<br/>                    !isPrimaryTouch(e)) return<br/>                cancelLongTap()<br/>                // swipe<br/>                if ((touch.x2 && Math.abs(touch.x1 - touch.x2) > 30) ||<br>                    (touch.y2 && Math.abs(touch.y1 - touch.y2) > 30))<br>                    swipeTimeout = setTimeout(function() {<br>                        touch.el.trigger('swipe')<br>                        touch.el.trigger('swipe' + (swipeDirection(touch.x1, touch.x2, touch.y1, touch.y2)))<br>                        touch = {}<br>                    }, 0)<br>                // normal tap<br>                else if ('last' in touch)<br>                // don't fire tap when delta position changed by more than 30 pixels,<br>                // for instance when moving to a point and back to origin<br>                    if (deltaX < 30 && deltaY < 30) {<br>                        // delay by one tick so we can cancel the 'tap' event if 'scroll' fires<br>                        // ('tap' fires before 'scroll')<br>                        tapTimeout = setTimeout(function() {<br>                            // trigger universal 'tap' with the option to cancelTouch()<br>                            // (cancelTouch cancels processing of single vs double taps for faster 'tap' response)<br>                            var event = $.Event('tap')<br>                            event.cancelTouch = cancelAll<br>                            touch.el.trigger(event)<br>                            // trigger double tap immediately<br>                            if (touch.isDoubleTap) {<br>                                if (touch.el) touch.el.trigger('doubleTap')<br>                                touch = {}<br>                            }<br>                            // trigger single tap after 250ms of inactivity<br>                            else {<br>                                touchTimeout = setTimeout(function(){<br>                                    touchTimeout = null<br>                                    if (touch.el) touch.el.trigger('singleTap')<br>                                    touch = {}<br>                                }, 250)<br>                            }<br>                        }, 0)<br>                    } else {<br>                        touch = {}<br>                    }<br>                deltaX = deltaY = 0<br>            })<br>            // when the browser window loses focus,<br>            // for example when a modal dialog is shown,<br>            // cancel all ongoing events<br>            .on('touchcancel MSPointerCancel pointercancel', cancelAll)<br>        // scrolling the window indicates intention of the user<br>        // to scroll, not tap or swipe, so cancel all ongoing events<br>        $(window).on('scroll', cancelAll)<br>    })<br>    ;['swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown',<br>        'doubleTap', 'tap', 'singleTap', 'longTap'].forEach(function(eventName){<br>            $.fn[eventName] = function(callback){ return this.on(eventName, callback) }<br>        })<br>})(Zepto)</span>

Copier après la connexion

Analyse détaillée :

D'après le code source de zepto, on sait clairement que l'événement tap est simulé via l'événement touch lié au document. Par conséquent, lorsque l'utilisateur clique sur l'événement tap (touchstart, touchend), il doit remonter jusqu'au document avant d'être déclenché. Cependant, l'utilisateur déclenchera des événements de clic au début et à la fin du toucher, mais à ce moment, l'événement de clic est retardé de 300 ms. Si l'événement de clic a été terminé dans ces 300 ms, l'élément supérieur sera supprimé ou masqué. Lorsque 300 ms arrivent, selon le principe des événements de clic (lorsque l'élément de l'événement de clic est au niveau supérieur, il sera dans l'événement de clic, donc parfois un mauvais réglage du z-index empêche le déclenchement de l'événement de clic), l'événement inférieur est exécuté et apparaît un phénomène de pénétration. Supposons que la couche inférieure soit l'élément d'entrée Même si aucun événement de clic n'est lié, le phénomène de pénétration est particulièrement grave en raison de sa focalisation par défaut sur le clavier contextuel.

Solution :

1 Il existe un plug-in fastclick sur github pour éviter l'exécution retardée des événements de clic. Après avoir importé le fichier, ajoutez le code suivant et remplacez l'élément d'événement tap qui peut provoquer une pénétration avec clic.

$(function(){ new FastClick(document.body); })

Copier après la connexion

2. Écoutez les événements touchend pour remplacer tap, ou touchstart, et évitez les bulles

$("#close").on("touchend",function(e){
$("#alertBox").hide();
e.preventDefault();
});

Copier après la connexion

3. Les pointer-events: true et pointer-events: none sont utilisés de manière interchangeable pour définir l'élément inférieur afin d'empêcher le déclenchement de l'événement click.

4. Retardez la disparition de l'élément supérieur afin que l'événement de clic inférieur ne puisse pas être déclenché. Essayez de retarder plus de 350 ms (je l'ai testé sur WeChat 6.3.15 sur iOS9.2. ). Cependant, c'est une expérience légèrement mauvaise. Nous pouvons utiliser la transition CSS3 pour améliorer l'expérience.

setTimeout(function(){ $(#alertBox).hide(); } , 350 );

5. : Remplacez tous les robinets par un clic. En raison du délai de clic, qui entraîne des problèmes d'expérience, il est préférable d'ajouter le plug-in fastclick.

Ce qui suit est un exemple simple que j'ai écrit : Vous pouvez utiliser votre téléphone portable pour accéder à http://property.pingan.com/app/test/jltest/tap-through.html ?a= 1

A travers l'exemple, on voit bien que le bouton sous-jacent a pour effet d'être appuyé après la pénétration de l'événement. Lors de tests fréquents, puisque WeChat met la page en cache et ne peut pas voir le contenu immédiatement modifié, nous pouvons ajouter des paramètres inutiles à l'URL tels que a=1, afin que le navigateur se recharge.

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
 <title>test-tap-through</title>
 <script src="js/zepto.min.js" charset="utf-8"></script>
 <style media="screen">
 body{
 margin: 0;
 padding: 0;
 }
 .test1,.test2{
 position: relative;
 }
 .button{
 width: 90%;
 height: 75px;
 background-color: #00ffff;
 margin: 5%;
 line-height: 75px;
 text-align: center;
 font-size: 40px;
 }
 .box{
 position: absolute;
 top:0;
 left: 0;
 width: 50%;
 height: 200px;
 background-color: #ff00ff;
 margin: 5%;
 line-height: 100px;
 text-align: center;
 font-size: 40px;
 z-index: 100;
 }
 </style>
</head>
<body>
 <p>
 <input type="button" id="button1" value="button1">
 <input type="button" id="button2" value="button2">
 <p id="box1" style="display:none">box1</p>
 <p id="box2" style="display:none">box2</p>
 </p>
 <p>
 <input type="button" id="button3" value="button3">
 <input type="button" id="button4" value="button4">
 <p id="box3" style="display:none">box3</p>
 <p id="box4" style="display:none">box4</p>
 </p>
</body>
<script type="text/javascript">
 $("#button1").click(function(){
 $("#box2").hide();
 $("#box1").show();
 });
 $("#button2").click(function(){
 $("#box1").hide();
 $("#box2").show();
 });
 $("#box2").tap(function(){
 $("#box2").hide();
 });
 $("#box1").tap(function(){
 $("#box1").hide();
 });
 $("#button3").click(function(){
 $("#box4").hide();
 $("#box3").show();
 });
 $("#button4").click(function(){
 $("#box3").hide();
 $("#box4").show();
 });
 $("#box3").tap(function(){
 setTimeout(function(){$("#box3").hide();},350);
 
 });
 $("#box4").tap(function(){
 setTimeout(function(){$("#box4").hide();},350);
 
 });
</script>
</html>

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment accéder aux propriétés et méthodes des objets JS

Comment utiliser le source CSS3 pour implémenter le chargement en anneau Barre de progression

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!