Markieren Sie den Ereignishandler als "passiv", um die Seite reaktionsschneller zu gestalten

217

Ich benutze Hammer zum Ziehen und es wird abgehackt, wenn andere Sachen geladen werden, wie diese Warnmeldung mir sagt.

Die Behandlung des Eingabeereignisses 'touchstart' wurde um X ms verzögert, da der Hauptthread ausgelastet war. Markieren Sie den Ereignishandler als "passiv", um die Seite reaktionsfähiger zu machen.

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

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

aber ich bekomme immer noch diese Warnung.

Matt
quelle

Antworten:

264

Für diejenigen, die diese Warnung zum ersten Mal erhalten, ist dies auf eine hochmoderne Funktion namens Passive Event Listeners zurückzuführen , die erst vor kurzem (Sommer 2016) in Browsern implementiert wurde. 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 kein Bildlauf mehr erforderlich ist, um Ereignis-Listener für Berührungen und Räder zu blockieren. Entwickler können Touch- und Wheel-Listener mit {passive: true} kommentieren, um anzuzeigen, dass sie präventDefault niemals aufrufen. Diese Funktion wurde in Chrome 51, Firefox 49 ausgeliefert und landete in WebKit. Eine vollständige offizielle Erklärung finden Sie hier.

Siehe auch: Was sind passive Ereignis-Listener?

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

Wenn Sie Ereignisse indirekt über eine JavaScript-Bibliothek verarbeiten, sind Sie möglicherweise der Unterstützung dieser Funktion durch diese bestimmte Bibliothek ausgeliefert. Ab Dezember 2019 scheint keine der großen Bibliotheken Unterstützung implementiert zu haben. Einige Beispiele:

Anson Kao
quelle
16
Was ist mit Ionenbibliotheken?
Abhit
10
Ich rufe an preventDefault()- Ist es möglich, diese Warnung zu unterdrücken?
Maja
12
Google Maps JavaScript API Version 3 generiert diese Warnungen ebenfalls. Das Problem wird unter issuetracker.google.com/issues/63211698 verfolgt . (Ein bisschen ironisch, wenn man bedenkt, dass Google Chrome vor Verstößen warnt, die von der Google Maps JavaScript API generiert werden.)
Jochem Schulenklopper
6
Um diese Warnung zu unterdrücken, können Sie "addEventListener" ("touchstart", this.callPassedFuntion, {passive: false}) "
Shlomi Schwartz
8

Dies verbirgt die Warnmeldung:

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 });
    }
  }
};
Iván Rodríguez
quelle
5
Wäre es nicht das Ziel, das eigentliche Ereignis zu stoppen? Ich möchte die Nachricht erst verbergen, wenn ich das Problem behoben habe.
Yardpenalty.com
1
Ich denke, es ist ein Problem mit der JQuery-Bibliothek. Ich denke, Entwickler müssen das Problem beheben. Aber wenn Sie es bekommen, lassen Sie mich bitte wissen, wie es geht. Ich danke dir sehr.
Iván Rodríguez
Auf jeden Fall Ivan! Ja, so ist es. Hey, jetzt bin ich neugierig ... Ich benutze das D3-Plugin und bekomme 2300 Verstöße. Vielleicht hilft Ihr Code! Ich halte dich auf dem laufenden!
Yardpenalty.com
@ Yardpenalty.com, nein, die Veranstaltung zu stoppen ist nicht das Ziel! In der Warnung wird angegeben, dass Sie Ihren Listener platziert haben, ohne anzugeben, ob das Standardverhalten des Ereignisses möglicherweise verhindert wird oder nicht. Wenn Sie Fälle haben, in denen Sie anrufen möchten preventDefault(), sollten Sie angeben passive: false. Wenn nicht, geben Sie an passive: true. Sie erhalten die Warnung nur, wenn Sie auch keine angeben. Wenn Sie angeben passive: trueund preventDefault()aufgerufen werden, führt dies zu einem Fehler und die Standardeinstellung wird nicht verhindert. Das Angeben passiveist hier kein Hack. Es ist die Lösung . Darum bittet die Warnung!
Tao
@tao danke für den Kommentar. Es ist ein paar Jahre her, aber ich werde mich in Zukunft definitiv an die Lösung erinnern!
Yardpenalty.com
1

Dies gilt auch für das Dropdown-Plugin select2 in Laravel. Ändern des Werts wie von Alfred Wallace vorgeschlagen von

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

zu

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

löst das Problem. Warum er eine Abwahl hat, weiß ich nicht, aber es funktioniert für mich.

Jun Salen
quelle
0

Suchen Sie für diejenigen, die mit älteren Problemen zu kämpfen haben, die Zeile, die den Fehler auslöst, und fügen Sie hinzu {passive: true}- z.

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

wird

this.element.addEventListener(t, e, { passive: true} )
Alfred Wallace
quelle
-1

Ich habe eine Lösung gefunden, die auf jQuery 3.4.1 slim funktioniert

Fügen Sie {passive: true}nach dem Aufheben der Minimierung der Funktion addEventListener in Zeile 1567 Folgendes hinzu :

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

Nichts bricht und Leuchtturm-Audits beschweren sich nicht über die Zuhörer.

Mark Lancaster
quelle
1
Ändern Sie niemals den Quellcode einer Bibliothek. Sie sollten es stattdessen überschreiben.
Raptor