Cuando el navegador móvil se desplaza por la página actual (y también puede hacer zoom en la página), el comportamiento predeterminado se bloquea, lo que hace que la página se vea obligada a permanecer quieta, lo que resulta en una mala experiencia del usuario y una sensación de pausa al desplazarse por la página.
Una explicación más específica: dado que el atributo cancelable del objeto de evento touchstart es verdadero, es decir, el oyente puede evitar su comportamiento predeterminado mediante el método preventDefault (). Pero el navegador no puede saber de antemano si un oyente llamará a preventDefault(). Todo lo que puede hacer es esperar a que el oyente termine de ejecutarse antes de ejecutar el comportamiento predeterminado. La ejecución del oyente lleva mucho tiempo, y algunas incluso consumen mucho tiempo. -consumiendo. , lo que hará que la página se congele. Incluso si el oyente es una función vacía, se producirá un cierto retraso. Después de todo, la ejecución de la función vacía también llevará tiempo.
use el parámetro Capture de addEventListenerConcepto básico: xxx.addEventListener('nombre del evento', función(xxx){xxx}, useCapture).
El primer parámetro representa el nombre del evento (excluyendo, como hacer clic); el segundo parámetro representa la función para recibir el procesamiento del evento; el tercer parámetro es useCapture.
Echemos un vistazo a lo que esto significa. Será más intuitivo dar un ejemplo directamente.
<div id=level1> <div id=level2> <div id=level3>Haga clic aquí</div> </div></div><div id=info></div>
var nivel1 = document.getElementById(nivel1);var nivel2 = document.getElementById(nivel2);var nivel3= document.getElementById(nivel3);var info = document.getElementById(info);outDiv.addEventListener(clic, función () { info.innerHTML += nivel1 + <br>; falso);middleDiv.addEventListener(hacer clic, función () { info.innerHTML += nivel2 + <br> }, falso); inDiv.addEventListener(clic, función () { info.innerHTML += nivel3 + <br>; }, falso);De acuerdo con el código anterior, veamos el efecto de useCapture como verdadero y falso:
Cuando todos son falsos, el orden de activación es: nivel3, nivel2, nivel1
Cuando todos son verdaderos, el orden de activación es: nivel1, nivel2, nivel3
Cuando el nivel1 es verdadero y otros son falsos, el orden de activación es: nivel1, nivel3, nivel2
Cuando el nivel2 es verdadero y otros son falsos, el orden de activación es: nivel2, nivel3, nivel1
Cuando el nivel3 es verdadero y otros son falsos, el orden de activación es: nivel3, nivel2, nivel1
Cuando el nivel1 es falso y otros son verdaderos, el orden de activación es: nivel2, nivel3, nivel1
Cuando el nivel2 es falso y otros son verdaderos, el orden de activación es: nivel1, nivel3, nivel2
Cuando el nivel3 es falso y otros son verdaderos, el orden de activación es: nivel1, nivel2, nivel3
De los resultados anteriores se pueden extraer las siguientes conclusiones:
Atributos pasivos para controlar el comportamiento del evento.El orden de activación de verdadero siempre es antes de falso;
Si varios son verdaderos, la capa externa se activa antes que la capa interna;
Si varias son falsas, la capa interna se activa antes que la capa externa.
como usarlo
addEventListener('nombre del evento', función(xxx){xxx}, {captura: falso, pasivo: falso, una vez: falso})Las tres propiedades son todos modificadores de tipo booleano y los valores predeterminados son falsos.
captura: equivalente al parámetro useCapture anterior;
una vez: significa que el oyente es único y se eliminará automáticamenteEventListener después de ejecutarse una vez;
Pasivo: utilizado para eventos táctiles de la aplicación web.
Se entiende que cuando los navegadores móviles utilizan eventos, el 80% de los detectores de eventos de desplazamiento no impiden el comportamiento predeterminado, lo que significa que, en la mayoría de los casos, el navegador espera en vano. Por lo tanto, nació el oyente pasivo. Pasivo significa obediente, lo que significa que no dirá no al comportamiento predeterminado del evento. Una vez que el navegador sabe que un oyente es pasivo, puede ejecutarlo en dos subprocesos al mismo tiempo. Código JavaScript y comportamiento predeterminado del navegador.
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.