Considera di contrassegnare il gestore eventi come "passivo" per rendere la pagina più reattiva

Sto usando Hammer per trascinare e sta diventando instabile quando si carica altra roba, come mi dice questo messaggio di avviso.

La gestione dell'evento di input "touchstart" è stata ritardata di X ms a causa del thread principale occupato. Considera di contrassegnare il gestore eventi come "passivo" per rendere la pagina più reattiva.

Quindi ho provato ad aggiungere "passivo" all'ascoltatore in questo modo

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

ma sto ancora ricevendo questo avviso.

Per coloro che ricevono questo avviso per la prima volta, è dovuto a una funzionalità all'avanguardia chiamata Ascoltatori di eventi passivi che è stata implementata nei browser abbastanza di recente (estate 2016). Da https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md :

I listener di eventi passivi sono una nuova funzionalità nelle specifiche DOM che consente agli sviluppatori di optare per prestazioni di scorrimento migliori eliminando la necessità di scorrere per bloccare i listener di eventi touch e wheel. Gli sviluppatori possono annotare gli ascoltatori touch e wheel con {passive: true} per indicare che non invocheranno mai preventDefault. Questa funzione è stata fornita in Chrome 51, Firefox 49 ed è arrivata in WebKit. Per una spiegazione ufficiale completa leggi di più qui.

Vedi anche: Cosa sono i listener di eventi passivi?

Potrebbe essere necessario attendere che la libreria .js implementi il ​​supporto.

Se gestisci gli eventi indirettamente tramite una libreria JavaScript, potresti essere in balia del supporto di quella particolare libreria per la funzione. A dicembre 2019, non sembra che nessuna delle principali biblioteche abbia implementato il supporto. Qualche esempio:

• jQuery.js - problema in corso: https://github.com/jquery/jquery/issues/2871
• React.js - problema in corso: https://github.com/facebook/react/issues/6436
• Hammer.js - chiuso per nessun follow-up: https://github.com/hammerjs/hammer.js/pull/987
• perfect-scrollbar - chiuso: https://github.com/noraesae/perfect-scrollbar/issues/560
• AngularJS - chiuso perché non risolto: https://github.com/angular/angular.js/issues/15901

Questo nasconde il messaggio di avviso:

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

Incontralo anche nel plugin a discesa select2 in Laravel. Modifica del valore come suggerito da Alfred Wallace da

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

per

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

risolve il problema. Perché abbia un voto negativo, non lo so, ma funziona per me.

Per quelli bloccati con problemi legacy, trova la riga che lancia l'errore e aggiungi {passive: true}- ad esempio:

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

diventa

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

Per jquery-ui-dragable con jquery-ui-touch-punch l'ho risolto in modo simile a Iván Rodríguez, ma con un altro evento override per 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') });
    }
};

Ho trovato una soluzione che funziona su jQuery 3.4.1 slim

Dopo la disattivazione, aggiungi {passive: true}alla funzione addEventListener sulla riga 1567 in questo modo:

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

Nulla si rompe e gli audit del faro non si lamentano degli ascoltatori.