Considere marcar el controlador de eventos como 'pasivo' para que la página sea más receptiva

Estoy usando un martillo para arrastrar y se está entrecortando al cargar otras cosas, como me dice este mensaje de advertencia.

El manejo del evento de entrada 'touchstart' se retrasó por X ms debido a que el subproceso principal está ocupado. Considere marcar el controlador de eventos como 'pasivo' para que la página sea más receptiva.

Así que intenté agregar 'pasivo' al oyente así

Hammer(element[0]).on("touchstart", function(ev) {
  // stuff
}, {
  passive: true
});

pero sigo recibiendo esta advertencia.

Para aquellos que reciben esta advertencia por primera vez, se debe a una característica innovadora llamada Passive Event Listeners que se implementó en los navegadores recientemente (verano de 2016). Desde https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md :

Los 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 oyentes táctiles y de rueda con {pasivo: verdadero} para indicar que nunca invocarán preventDefault. Esta característica se envió en Chrome 51, Firefox 49 y aterrizó en WebKit. Para una explicación oficial completa, lea más aquí.

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

Puede que tenga que esperar a que su biblioteca .js implemente el soporte.

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 función. A partir de diciembre de 2019, no parece que ninguna de las principales bibliotecas haya implementado el soporte. Algunos ejemplos:

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

Esto oculta el mensaje de advertencia:

jQuery.event.special.touchstart = 
{
  setup: function( _, ns, handle )
  {
    if ( ns.includes("noPreventDefault") ) 
    {
      this.addEventListener("touchstart", handle, { passive: false });
    } 
    else 
    {
      this.addEventListener("touchstart", handle, { passive: true });
    }
  }
};

También encuentre esto en el complemento desplegable select2 en Laravel. Cambiar el valor sugerido por Alfred Wallace de

this.element.addEventListener(t, e, !1)

a

this.element.addEventListener(t, e, { passive: true} )

resuelve el problema No sé por qué tiene un voto negativo, pero me funciona.

Para aquellos atrapados en problemas heredados, busque la línea que arroja el error y agregue {passive: true}, por ejemplo:

this.element.addEventListener(t, e, !1)

se convierte

this.element.addEventListener(t, e, { passive: true} )

Para jquery-ui-dragable con jquery-ui-touch-punch lo arreglé de manera similar a Iván Rodríguez, pero con una anulación 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') });
    }
};

Encontré una solución que funciona en jQuery 3.4.1 slim

Después de desminificar, agregue {passive: true}a la función addEventListener en la línea 1567 de la siguiente manera:

t.addEventListener(p, a, {passive: true}))

Nada se rompe y las auditorías de los faros no se quejan de los oyentes.