web-dev-qa-db-fra.com

Pensez à marquer le gestionnaire d'événements comme "passif" pour rendre la page plus réactive.

J'utilise marteau pour faire glisser et cela s'agite lorsque je charge d'autres éléments, comme le dit ce message d'avertissement.

Le traitement de l'événement d'entrée 'touchstart' a été retardé de X ms en raison de l'occupation du thread principal. Considérez le gestionnaire d'événements comme étant "passif" pour rendre la page plus réactive.

Alors j'ai essayé d'ajouter 'passif' à l'auditeur comme si

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

mais je reçois toujours cet avertissement.

javascriptjqueryangularjstouchhammer.js
194
Matt

Pour ceux qui reçoivent cet avertissement pour la première fois, il est dû à une fonctionnalité Edge homogène appelée écouteurs d'événements passifs qui a été implémentée récemment dans les navigateurs (été 2016). De 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 permettant aux développeurs de s'inscrire pour améliorer les performances de défilement en éliminant la nécessité de faire défiler pour bloquer les contacts. et les auditeurs d'événement de roue. Les développeurs peuvent annoter Touch et déplacer les écouteurs avec {passif: vrai} pour indiquer qu'ils ne pourront jamais invoquer preventDefault. Cette fonctionnalité a été livrée dans Chrome 51, Firefox 49 et a atterri dans WebKit. Pour une explication officielle complète, lisez plus ici.

Voir aussi: Qu'est-ce qu'un écouteur d'événement passif?

Vous devrez peut-être attendre que votre bibliothèque .js mette en place 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 pour la fonctionnalité. Depuis août 2016, aucune des grandes bibliothèques ne semble avoir mis en place de support. Quelques exemples:

241
Anson Kao

cela cache le message

    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 });
        }
      }
    };
3
Iván Rodríguez