Envisagez de marquer le gestionnaire d'événements comme «passif» pour rendre la page plus réactive

J'utilise un marteau pour faire glisser et cela devient saccadé lors du chargement d'autres choses, comme ce message d'avertissement me le dit.

La gestion de l'événement d'entrée «touchstart» a été retardée de X ms car le thread principal est occupé. Pensez à marquer le gestionnaire d'événements comme «passif» pour rendre la page plus réactive.

J'ai donc essayé d'ajouter "passif" à l'auditeur comme ça

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

mais je reçois toujours cet avertissement.

Pour ceux qui reçoivent cet avertissement pour la première fois, cela est dû à une fonctionnalité de pointe appelée écouteurs d'événements passifs qui a été implémentée dans les navigateurs assez récemment (été 2016). Depuis https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md :

Les écouteurs d'événements passifs sont une nouvelle fonctionnalité de la spécification DOM qui permet aux développeurs de choisir de meilleures performances de défilement en éliminant la nécessité de faire défiler pour bloquer les écouteurs d'événements tactiles et mobiles. Les développeurs peuvent annoter les écouteurs tactiles et à molette avec {passive: true} pour indiquer qu'ils n'invoqueront jamais preventDefault. Cette fonctionnalité est livrée dans Chrome 51, Firefox 49 et a atterri dans WebKit. Pour une explication officielle complète, lisez plus ici.

Voir aussi: Que sont les écouteurs d'événements passifs?

Vous devrez peut-être attendre que votre bibliothèque .js implémente le support.

Si vous gérez des événements indirectement via une bibliothèque JavaScript, vous pouvez être à la merci du support de cette bibliothèque particulière pour la fonctionnalité. En décembre 2019, il ne semble pas que les principales bibliothèques aient implémenté le support. Quelques exemples:

• jQuery.js - problème en cours: https://github.com/jquery/jquery/issues/2871
• React.js - problème en cours: https://github.com/facebook/react/issues/6436
• Hammer.js - fermé en raison de l'absence de suivi: https://github.com/hammerjs/hammer.js/pull/987
• perfect-scrollbar - fermé: https://github.com/noraesae/perfect-scrollbar/issues/560
• AngularJS - fermé pour cause de non-correction: https://github.com/angular/angular.js/issues/15901

Cela masque le message d'avertissement:

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

Rencontrez également cela dans le plugin dropdown select2 de Laravel. Changer la valeur comme suggéré par Alfred Wallace de

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

à

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

résout le problème. Pourquoi il a un vote négatif, je ne sais pas mais ça marche pour moi.

Pour ceux qui sont coincés avec des problèmes hérités, recherchez la ligne qui renvoie l'erreur et ajoutez {passive: true}- par exemple:

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

devient

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

Pour jquery-ui-dragable avec jquery-ui-touch-punch, je l'ai corrigé comme pour Iván Rodríguez, mais avec un autre événement prioritaire pour 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') });
    }
};

J'ai trouvé une solution qui fonctionne sur jQuery 3.4.1 slim

Après avoir réduit la taille, ajoutez {passive: true}à la fonction addEventListener sur la ligne 1567 comme suit :

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

Rien ne casse et les audits des phares ne se plaignent pas des auditeurs.