Explication détaillée de la solution au défilement bloqué des pages de l'application Web

Lorsque le navigateur mobile fait défiler la page actuelle (et peut également effectuer un zoom sur la page), le comportement par défaut est bloqué, obligeant la page à rester immobile, ce qui entraîne une mauvaise expérience utilisateur et une sensation de pause lors du défilement de la page.

Une explication plus spécifique : puisque l'attribut annulable de l'objet événement touchstart est vrai, c'est-à-dire que son comportement par défaut peut être empêché par l'écouteur via la méthode PreventDefault(). Mais le navigateur ne peut pas savoir à l'avance si un écouteur appellera PreventDefault(). Tout ce qu'il peut faire, c'est attendre que l'écouteur ait fini de s'exécuter avant d'exécuter le comportement par défaut. L'exécution de l'écouteur prend du temps, et certaines prennent même beaucoup de temps. -consumant , ce qui entraînera le gel de la page. Même si l'écouteur est une fonction vide, un certain décalage se produira. Après tout, l'exécution de la fonction vide prendra également du temps.

Concept de base : xxx.addEventListener('event name', function(xxx){xxx}, useCapture).

Le premier paramètre représente le nom de l'événement (à l'exclusion de on, tel que click) ; le deuxième paramètre représente la fonction devant recevoir le traitement de l'événement ; le troisième paramètre est useCapture ;

Voyons ce que signifie cette chose. Il sera plus intuitif de donner un exemple directement.

 <div id=level1> <div id=level2> <div id=level3>Veuillez cliquer ici</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 += niveau1 + <br>; }, false);middleDiv.addEventListener(cliquez, function () { info.innerHTML += niveau2 + <br>; }, false);inDiv.addEventListener(clic, fonction () { info.innerHTML += niveau3 + <br>; }, faux);

D'après le code ci-dessus, voyons l'effet de useCapture comme vrai et faux :

Lorsque tout est faux, l'ordre de déclenchement est : niveau3, niveau2, niveau1

Lorsque tout est vrai, l’ordre de déclenchement est : niveau1, niveau2, niveau3

Lorsque le niveau 1 est vrai et les autres sont faux, l'ordre de déclenchement est : niveau 1, niveau 3, niveau 2

Lorsque le niveau 2 est vrai et que les autres sont faux, l'ordre de déclenchement est : niveau 2, niveau 3, niveau 1

Lorsque le niveau 3 est vrai et que les autres sont faux, l'ordre de déclenchement est : niveau 3, niveau 2, niveau 1

Lorsque le niveau 1 est faux et que les autres sont vrais, l'ordre de déclenchement est : niveau 2, niveau 3, niveau 1

Lorsque le niveau 2 est faux et que les autres sont vrais, l'ordre de déclenchement est : niveau 1, niveau 3, niveau 2

Lorsque le niveau 3 est faux et que les autres sont vrais, l'ordre de déclenchement est : niveau 1, niveau 2, niveau 3

Les conclusions suivantes peuvent être tirées des résultats ci-dessus :

L'ordre de déclenchement de true est toujours avant false ;

Si plusieurs sont vrais, la couche externe est déclenchée avant la couche interne ;

Si plusieurs sont faux, la couche interne est déclenchée avant la couche externe.

Comment l'utiliser

 addEventListener('nom de l'événement', function(xxx){xxx}, { capture : false, passive : false, once : false})

Les trois propriétés sont toutes des commutateurs de type booléen et les valeurs par défaut sont fausses.

capture : équivalent au paramètre useCapture précédent ;

once : cela signifie que l'écouteur est unique et sera automatiquement suppriméEventListener après avoir été exécuté une fois ;

Passif : utilisé pour les événements tactiles de l'application Web

Il est entendu que lorsque les navigateurs mobiles utilisent des événements, 80 % des écouteurs d'événements de défilement n'empêchent pas le comportement par défaut, ce qui signifie que dans la plupart des cas, le navigateur attend en vain. Par conséquent, l'écouteur passif est né. Passif signifie obéissant, ce qui signifie qu'il ne dira pas non au comportement par défaut de l'événement. Une fois que le navigateur sait qu'un écouteur est passif, il peut l'exécuter dans deux threads en même temps. . Code JavaScript et comportement par défaut du navigateur.

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.