javascript - Ia în considerare marcarea gestionatorului de evenimente ca 'passiv' pentru a face pagina mai receptivă

Folosesc ciocanul pentru tragere și devine sacadat când încarc alte lucruri, așa cum acest mesaj de avertizare îmi spune.

Gestionarea evenimentului de intrare 'touchstart' a fost întârziată cu X ms deoarece firul principal era ocupat. Luați în considerare marcarea handler-ului evenimentului ca 'passive' pentru a face pagina mai receptivă.

Așa că am încercat să adaug 'passive' la ascultător astfel

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

dar încă primesc acest avertisment.

Răspuns #1

Pentru cei care primesc acest avertisment pentru prima dată, acesta se datorează unei funcții de ultimă generație numită Ascultători de Evenimente Pasivi care a fost implementată în browsere în vara anului 2016. De la https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md:

Ascultători de evenimente pasivi sunt o caracteristică nouă în specificația DOM care permite dezvoltatorilor să opteze pentru o performanță mai bună la derulare prin eliminarea necesității ca derularea să fie blocată de ascultătorii de evenimente de tip touch și wheel. Dezvoltatorii pot adnota ascultătorii touch și wheel cu {passive: true} pentru a indica faptul că nu vor apela niciodată preventDefault. Această caracteristică a fost lansată în Chrome 51, Firefox 49 și a ajuns în WebKit. Pentru o explicație oficială completă citiți mai multe aici.

Vezi și: Ce sunt ascultătorii de evenimente pasivi?

Este posibil să trebuiască să așteptați ca biblioteca dvs. .js să implementeze suportul.

Dacă gestionați evenimentele indirect printr-o bibliotecă JavaScript, este posibil să depindeți de suportul acelei biblioteci pentru funcționalitate. Începând cu decembrie 2019, nu pare ca vreo bibliotecă majoră să fi implementat suportul. Câteva exemple:

• jQuery.js - problem în desfășurare: https://github.com/jquery/jquery/issues/2871
• React.js - problemă în desfășurare: https://github.com/facebook/react/issues/6436
  Discuție React 17: https://github.com/facebook/react/issues/19651
• Hammer.js - închis din lipsă de urmărire: https://github.com/hammerjs/hammer.js/pull/987
• perfect-scrollbar - închis: https://github.com/noraesae/perfect-scrollbar/issues/560
• AngularJS - închis din cauza „nu se va rezolva”: https://github.com/angular/angular.js/issues/15901

Răspunsul #2

Următoarea bibliotecă a rezolvat problema.
Pur și simplu adăugați acest cod în proiectul vostru.

<script type="text/javascript" src="https://unpkg.com/default-passive-events"></script>

Dacă ai nevoie de mai multe informații, vizitează această bibliotecă.

Răspunsul #3

Acest lucru ascunde mesajul de avertizare:

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

Răspunsul #4

Pentru cei blocați cu probleme moștenite, găsiți linia care generează eroarea și adăugați {passive: true} - de exemplu:

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

devine

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