So verwenden Sie Zepto Tap Event Penetration und Point Penetration (mit Code)

Dieses Mal zeige ich Ihnen, wie Sie das Zepto-Tap-Ereignis verwenden, um einzudringen und durchzuklicken (mit Code), und wie Sie das Zepto-Tap-Ereignis verwenden, um einzudringen und durchzuklicken Was sind die Vorsichtsmaßnahmen , wie folgt Dies ist ein praktischer Fall, schauen wir uns ihn an.

Zuerst einmal: Was ist die Penetration von Zepto-Tap-Ereignissen?

Tap-Ereignis-Penetration bedeutet, dass es Bindungsereignisse auf mehreren Ebenen gibt. Die oberste Ebene ist an das Tipp-Ereignis gebunden, und die untere Ebene ist an das Klick-Ereignis gebunden Das Ereignis wird ausgeführt, Ereignisse auf niedrigerer Ebene werden ausgelöst und es kommt zu einer Ereignisdurchdringung. Wenn die untere Ebene ein Eingabe-Tag ist, muss es eindringen.

Der Grund:

liegt darin, dass zepto das Tap-Ereignis implementiert, das ausgelöst wird, wenn es zum Dokument, also zum Tap, sprudelt Das Ereignis ist an das Dokument gebunden und das Klickereignis hat die Ausführung verzögert.

Nachfolgend veröffentlichen wir den Quellcode des Tap-Events 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>

Detaillierte Analyse:

Laut dem Zepto-Quellcode wissen wir eindeutig, dass das Tippereignis durch das an das Dokument gebundene Berührungsereignis simuliert wird. Wenn der Benutzer auf das Tippereignis (Touchstart, Touchend) klickt, muss es daher zum Dokument gelangen, bevor es ausgelöst wird. Der Benutzer löst jedoch Klickereignisse bei Touchstart und Touchend aus. Zu diesem Zeitpunkt wird das Klickereignis jedoch um 300 ms verzögert. Wenn das Tippereignis innerhalb dieser 300 ms abgeschlossen wurde, wird das obere Element gelöscht oder ausgeblendet. Wenn 300 ms eintreffen, gemäß dem Prinzip von Klickereignissen (wenn sich das Element des Klickereignisses auf der obersten Ebene befindet, befindet es sich im Klickereignis, sodass manchmal die falsche Z-Index-Einstellung verhindert, dass das Klickereignis ausgelöst wird), Das untere Ereignis wird ausgeführt und tritt als Penetrationsphänomen auf. Lassen Sie die untere Ebene das Eingabeelement sein. Auch wenn das Klickereignis nicht gebunden ist, ist das Penetrationsphänomen aufgrund seines standardmäßigen Fokus auf die Popup-Tastatur besonders schwerwiegend.

Lösung:

1 Es gibt ein Fastclick-Plugin auf Github, um die verzögerte Ausführung von Klickereignissen zu vermeiden. Fügen Sie nach dem Importieren der Datei den folgenden Code hinzu und ersetzen Sie das Tap-Ereigniselement, das eine Penetration verursachen kann, durch Click.

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

2. Achten Sie auf Touchend-Ereignisse, um Tap oder Touchstart zu ersetzen und Sprudeln zu verhindern

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

3. Verwenden Sie CSS3-Zeigerereignisse: true und pointer-events: none werden austauschbar verwendet, um die zugrunde liegenden Elemente festzulegen, um zu verhindern, dass Klickereignisse ausgelöst werden.

4. Verzögern Sie das Verschwinden des oberen Elements, damit das untere Klickereignis nicht mehr als 350 ms ausgelöst werden kann (ich habe es auf WeChat 6.3.15 unter iOS9.2 getestet). ). Dies ist jedoch eine etwas schlechte Erfahrung. Wir können den CSS3-Übergang verwenden, um die Erfahrung zu verbessern.

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

5 : Ersetzen Sie alle Wasserhähne durch Klicken. Aufgrund der Klickverzögerung, die zu Erfahrungsproblemen führt, ist es am besten, das Fastclick-Plug-In hinzuzufügen.

Das Folgende ist ein einfaches Beispiel, das ich geschrieben habe: Sie können Ihr Mobiltelefon verwenden, um auf http://property.pingan.com/app/test/jltest/tap-through.html zuzugreifen ?a= 1

Anhand des Beispiels können wir deutlich erkennen, dass der zugrunde liegende Knopf den Effekt hat, dass er gedrückt wird, nachdem das Ereignis eingedrungen ist. Da WeChat bei häufigen Tests die Seite zwischenspeichert und den sofort geänderten Inhalt nicht sehen kann, können wir der URL einige nutzlose Parameter wie a=1 hinzufügen, damit der Browser neu geladen wird.

<!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>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So greifen Sie auf JS-Objekteigenschaften und -Methoden zu

So verwenden Sie Quell-CSS3, um das Ringladen zu implementieren Fortschrittsbalken

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Zepto Tap Event Penetration und Point Penetration (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!