Hacer que los event listeners de tacto y rueda agregados por las bibliotecas sean “pasivos”.
Tengo dos proyectos:
Bootstrap
conjQuery
materialize-css
conVanilla 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.