Ausführliche Erklärung der Lösung für das steckengebliebene Scrollen von Webapp-Seiten

Wenn der mobile Browser die aktuelle Seite scrollt (und möglicherweise auch die Seite zoomt), wird das Standardverhalten blockiert, wodurch die Seite gezwungen wird, still zu bleiben, was zu einer schlechten Benutzererfahrung und einem Gefühl der Pause beim Scrollen der Seite führt.

Eine spezifischere Erklärung: Da das abbrechbare Attribut des Touchstart-Ereignisobjekts wahr ist, kann sein Standardverhalten vom Listener über die Methode PreventDefault () verhindert werden. Der Browser kann jedoch nicht im Voraus wissen, ob ein Listener „preventDefault()“ aufruft. Er kann lediglich warten, bis die Ausführung des Listeners abgeschlossen ist, bevor er das Standardverhalten ausführt -verbrauchend, was dazu führt, dass die Seite einfriert. Selbst wenn der Listener eine leere Funktion ist, tritt eine gewisse Verzögerung auf. Schließlich dauert die Ausführung der leeren Funktion auch einige Zeit.

Grundkonzept: xxx.addEventListener('event name', function(xxx){xxx}, useCapture).

Der erste Parameter stellt den Ereignisnamen dar (ausgenommen on, z. B. click); der zweite Parameter stellt die Funktion zum Empfangen der Ereignisverarbeitung dar;

Werfen wir einen Blick darauf, was diese Sache bedeutet. Es wird intuitiver sein, direkt ein Beispiel zu geben.

 <div id=level1> <div id=level2> <div id=level3>Bitte klicken Sie hier</div> </div></div><div id=info></div> 

 var level1 = document.getElementById(level1);var level2 = document.getElementById(level2);var level3= document.getElementById(level3);var info = document.getElementById(info);outDiv.addEventListener(click, function () { info.innerHTML += level1 + <br>;;middleDiv.addEventListener(click, function () { info.innerHTML += level2 + <br>; }, false);inDiv.addEventListener(click, function () { info.innerHTML += level3 + <br>; }, false);

Sehen wir uns anhand des obigen Codes den Effekt von useCapture als wahr und falsch an:

Wenn alle falsch sind, lautet die Auslösereihenfolge: Level3, Level2, Level1

Wenn alle wahr sind, lautet die Auslösereihenfolge: Level1, Level2, Level3

Wenn Level1 wahr und andere falsch sind, lautet die Auslösereihenfolge: Level1, Level3, Level2

Wenn Level2 wahr ist und andere falsch, lautet die Auslösereihenfolge: Level2, Level3, Level1

Wenn Level3 wahr ist und andere falsch, lautet die Auslösereihenfolge: Level3, Level2, Level1

Wenn Level1 falsch und andere wahr sind, lautet die Auslösereihenfolge: Level2, Level3, Level1

Wenn Level2 falsch und andere wahr sind, lautet die Auslösereihenfolge: Level1, Level3, Level2

Wenn Level3 falsch und andere wahr sind, lautet die Auslösereihenfolge: Level1, Level2, Level3

Aus den oben genannten Ergebnissen lassen sich folgende Schlussfolgerungen ziehen:

Die auslösende Reihenfolge von „wahr“ liegt immer vor „falsch“;

Wenn mehrere wahr sind, wird die äußere Schicht vor der inneren Schicht ausgelöst.

Wenn mehrere falsch sind, wird die innere Schicht vor der äußeren Schicht ausgelöst.

Wie man es benutzt

 addEventListener('event name', function(xxx){xxx}, { Capture: false, passive: false, Once: false})

Die drei Eigenschaften sind alle Schalter vom Typ Boolean und der Standardwert ist falsch.

Capture: entspricht dem vorherigen useCapture-Parameter;

einmal: Dies bedeutet, dass der Listener einmalig ist und automatisch entfernt wirdEventListener nach einmaliger Ausführung;

Passiv: Wird für Touch-Ereignisse der Webanwendung verwendet

Es versteht sich, dass bei der Verwendung von Ereignissen in mobilen Browsern 80 % der Scroll-Ereignis-Listener das Standardverhalten nicht verhindern, was bedeutet, dass der Browser in den meisten Fällen vergeblich wartet. Daher wurde der passive Listener geboren, was bedeutet, dass er das Standardverhalten des Ereignisses nicht ablehnt. Sobald der Browser weiß, dass ein Listener passiv ist, kann er den Listener gleichzeitig in zwei Threads ausführen . JavaScript-Code und das Standardverhalten des Browsers.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.