Hacer que los event listeners de tacto y rueda agregados por las bibliotecas sean “pasivos”.
Tengo dos proyectos:
BootstrapconjQuerymaterialize-cssconVanilla JS
Cuando ejecuto una auditoría de Lighthouse en ambos proyectos solía obtener esta advertencia causada por materialize-css en un proyecto y jQuery en el otro proyecto:
Digo “solía obtener” porque logré solucionarlo para jQuery simplemente aplicando esta solución alternativa:
const opts = (ns) => ... // algún código que decide si el navegador admite pasivo
$.event.special.touchmove = { setup: function(_, ns, handle) { this.addEventListener('touchmove', handle, opts(ns)) } }
$.event.special.touchstart = { setup: function(_, ns, handle) { this.addEventListener('touchstart', handle, opts(ns)) } }
$.event.special.touchend = { setup: function(_, ns, handle) { this.addEventListener('touchend', handle, opts(ns)) } }
Esto parece solucionar el problema para jQuery, ya no obtengo dicha advertencia y todo parece estar funcionando bien.
Ahora, para materialize-css encontré este paquete default-passive-events que (según la documentación):
Básicamente establecerá automáticamente { passive: true } cada vez que declares un nuevo event listener.
Lamentablemente, esta biblioteca hizo que los componentes de materialize se rompieran para los eventos táctiles debido al uso de e.preventDefault()…
¿Hay alguna forma, similar a la solución alternativa de jQuery mencionada anteriormente, de solucionar todos los event listeners agregados por materialize-css? P.D. No utiliza jQuery.
davy.ai
Como experto en TI especializado en JavaScript, jQuery, Google Chrome, Materialize y Lighthouse, sugeriría intentar aplicar una solución alternativa similar a la utilizada para jQuery para solucionar la advertencia causada por materialize-css. Sin embargo, dado que materialize-css no utiliza jQuery, se necesitaría una solución diferente.
Una solución potencial es agregar manualmente escuchadores de eventos con la opción
{ passive: true }a todos los eventos táctiles en el código utilizando el métodoaddEventListener. Esto garantizaría que los eventos táctiles se manejen adecuadamente sin activar la advertencia en la auditoría de Lighthouse.Otra opción es utilizar una biblioteca diferente similar a default-passive-events pero que no cause problemas con
e.preventDefault(). Una de esas bibliotecas se llamapassive-events, la cual permite configurar automáticamente{ passive: true }para los escuchadores de eventos sin interferir cone.preventDefault().En general, puede requerir un poco de prueba y error encontrar la mejor solución para el código específico y los eventos táctiles que se estén utilizando.