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

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.

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:

• jQuery.js - laufendes Problem: https://github.com/jquery/jquery/issues/2871
• React.js - laufendes Problem: https://github.com/facebook/react/issues/6436
• Hammer.js - geschlossen, da keine Folgemaßnahmen getroffen wurden: https://github.com/hammerjs/hammer.js/pull/987
• Perfect-Scrollbar - geschlossen: https://github.com/noraesae/perfect-scrollbar/issues/560
• AngularJS - geschlossen, da dies nicht behoben werden kann: https://github.com/angular/angular.js/issues/15901

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 });
    }
  }
};

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.

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} )

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.