it-swarm.com.de

Markieren Sie den Ereignishandler als "passiv", damit die Seite schneller reagiert

Ich benutze Hammer zum Ziehen und es wird unruhig, wenn ich andere Sachen lade, wie mir diese Warnmeldung sagt.

Die Behandlung des Eingabeereignisses 'touchstart' wurde um X ms verzögert, da der Hauptthread ausgelastet war. Markieren Sie den Ereignishandler als "passiv", damit die Seite schneller reagiert.

Also habe ich versucht, dem Hörer "passiv" hinzuzufügen

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

aber ich bekomme immer noch diese Warnung.

194
Matt

Für diejenigen, die diese Warnung zum ersten Mal erhalten, liegt dies an der Funktion "Bleeding Edge" mit dem Namen " Passive Ereignis-Listener ", die erst vor einiger Zeit (im Sommer) in Browsern implementiert wurde 2016). Von https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md :

Passive Ereignis-Listener sind eine neue Funktion in der DOM-Spezifikation, mit der Entwickler sich für eine bessere Bildlaufleistung entscheiden können, da das Scrollen bei Berührung nicht mehr blockiert werden muss und Wheel Event Listener. Entwickler können Touch- und Wheel-Listener mit {passive: true} versehen, um anzugeben, dass sie preventDefault niemals aufrufen. Diese Funktion wurde in Chrome 51, Firefox 49 und WebKit ausgeliefert. Für die vollständige offizielle Erklärung lesen Sie hier mehr.

Siehe auch: Was sind passive Ereignis-Listener?

Möglicherweise müssen Sie warten, bis Ihre .js-Bibliothek die Unterstützung implementiert hat.

Wenn Sie Ereignisse indirekt über eine JavaScript-Bibliothek verarbeiten, sind Sie möglicherweise der Unterstützung dieser Funktion durch die jeweilige Bibliothek ausgeliefert. Seit August 2016 scheint keine der großen Bibliotheken Unterstützung implementiert zu haben. Einige Beispiele:

241
Anson Kao

dadurch wird die Nachricht ausgeblendet

    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