Saltar al contenido

Considere marcar el controlador de eventos como “pasivo” para que la página responda mejor

Esta es la respuesta más completa que te podemos dar, pero primero estúdiala detenidamente y valora si se puede adaptar a tu trabajo.

Para aquellos que reciben esta advertencia por primera vez, se debe a una función de última generación llamada Oyentes de eventos pasivos que se ha implementado en los navegadores recientemente (verano de 2016). De https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md:

Oyentes de eventos pasivos son una nueva característica en la especificación DOM que permite a los desarrolladores optar por un mejor rendimiento de desplazamiento al eliminar la necesidad de desplazarse para bloquear los oyentes de eventos táctiles y de rueda. Los desarrolladores pueden anotar los oyentes táctiles y de ruedas con passive: true para indicar que nunca invocarán preventDefault. Esta característica se envió en Chrome 51, Firefox 49 y aterrizó en WebKit. Para obtener una explicación oficial completa, lea más aquí.

Ver también: ¿Qué son los detectores de eventos pasivos?

Es posible que deba esperar a que su biblioteca .js implemente la compatibilidad.

Si está manejando eventos indirectamente a través de una biblioteca de JavaScript, puede estar a merced del soporte de esa biblioteca en particular para la característica. A partir de diciembre de 2019, no parece que ninguna de las principales bibliotecas haya implementado soporte. Algunos ejemplos:

  • jQuery.js – problema en curso: https://github.com/jquery/jquery/issues/2871
  • Reaccionar.js – problema en curso: https://github.com/facebook/react/issues/6436
  • Martillo.js – cerrado por falta de seguimiento: https://github.com/hammerjs/hammer.js/pull/987
  • barra de desplazamiento perfecta – cerrado: https://github.com/noraesae/perfect-scrollbar/issues/560
  • AngularJS – cerrado debido a que no se soluciona: https://github.com/angular/angular.js/issues/15901

Esto oculta el mensaje de advertencia:

jQuery.event.special.touchstart = 
  setup: function( _, ns, handle ) 
      this.addEventListener("touchstart", handle,  passive: !ns.includes("noPreventDefault") );
  
;

Para jquery-ui-dragable con jquery-ui-touch-punch lo arreglé de forma similar a Iván Rodríguez, pero con un override de evento más para touchmove:

jQuery.event.special.touchstart = 
    setup: function( _, ns, handle ) 
        this.addEventListener('touchstart', handle,  passive: !ns.includes('noPreventDefault') );
    
;
jQuery.event.special.touchmove = 
    setup: function( _, ns, handle ) 
        this.addEventListener('touchmove', handle,  passive: !ns.includes('noPreventDefault') );
    
;

Si estás contento con lo expuesto, tienes la libertad de dejar un artículo acerca de qué le añadirías a este ensayo.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)


Tags :

Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *