Rozważ oznaczenie obsługi zdarzeń jako "pasywny", aby strona była bardziej responsywna

Używam młota do przeciągania i robi się niepewnie podczas ładowania innych rzeczy, jak mówi mi ten Komunikat ostrzegawczy.

Obsługa zdarzenia wejściowego 'touchstart' została opóźniona o X ms z powodu główny wątek jest zajęty. Rozważmy oznaczenie obsługi zdarzenia jako "pasywnego" dla spraw, aby strona była bardziej responsywna.

Więc starałem się dodać 'pasywny' do słuchacza tak 

Hammer(element[0]).on("touchstart", function(ev) {
  // stuff
}, {
  passive: true
});
Ale wciąż dostaję to Ostrzeżenie.
Author: Sonicd300, 2016-08-25
Source

6 answers

Dla tych, którzy otrzymują to Ostrzeżenie po raz pierwszy, jest to spowodowane funkcją bleeding edge o nazwie Passive Event Listeners , która została zaimplementowana w przeglądarkach dość niedawno (lato 2016). Od https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md :

Pasywne słuchacze zdarzeń to nowa funkcja w specyfikacji DOM, która umożliwia programistów, aby zdecydować się na lepszą wydajność przewijania poprzez wyeliminowanie potrzeba przewijania do zablokowania dotykowy i koła słuchaczy zdarzeń. Programiści mogą przypisywać słuchacze dotyku i kółka za pomocą {passive: true} aby wskazać, że nigdy nie będą wywoływać preventDefault. Ta funkcja wysłane w Chrome 51, Firefox 49 i wylądował w WebKit. aby uzyskać pełne oficjalne wyjaśnienie przeczytaj więcej tutaj.

Zobacz także: czym są pasywne słuchacze zdarzeń?

Może będziesz musiał poczekać na swoją .biblioteka js do implementacji wsparcia.

Jeśli zajmujesz się zdarzeniami pośrednio korzystając z biblioteki JavaScript, możesz być na łasce obsługi tej konkretnej biblioteki dla tej funkcji. W grudniu 2019 r.nie wygląda na to, aby żadna z głównych bibliotek zaimplementowała wsparcie. Niektóre przykłady:

 281
Author: Anson Kao,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-12-05 11:19:08

To ukrywa komunikat ostrzegawczy: 

jQuery.event.special.touchstart = {
  setup: function( _, ns, handle ) {
      this.addEventListener("touchstart", handle, { passive: !ns.includes("noPreventDefault") });
  }
};
 12
Author: Iván Rodríguez,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-06-29 18:26:04

Dla jquery-UI-dragable z jQuery-ui-Touch-punch naprawiłem go podobnie jak Iván Rodríguez, ale z jeszcze jednym nadpisaniem zdarzeń dla touchmove: 

jQuery.event.special.touchstart = {
    setup: function( _, ns, handle ) {
        this.addEventListener('touchstart', handle, { passive: !ns.includes('noPreventDefault') });
    }
};
jQuery.event.special.touchmove = {
    setup: function( _, ns, handle ) {
        this.addEventListener('touchmove', handle, { passive: !ns.includes('noPreventDefault') });
    }
};
 6
Author: AndreyP,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-06-29 13:28:28

Dla tych, którzy mają problemy ze starszymi wersjami, znajdź linię rzucającą błąd i dodaj {passive: true} - np: 

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

Staje się 

this.element.addEventListener(t, e, { passive: true} )
 4
Author: Alfred Wallace,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-10-31 13:15:15

Spotkaj to również w rozwijanej wtyczce select2 w Laravel. Zmiana wartości według sugestii Alfreda Wallace ' a z 

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

Do 

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

Rozwiązuje problem. Nie wiem, dlaczego ma głos odrzucony, ale mi to pasuje.

 4
Author: Jun Salen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-04-16 11:10:11

Znalazłem rozwiązanie, które działa na jQuery 3.4.1 slim

Po un-minifikacji dodaj {passive: true} do funkcji addEventListener w linii 1567 Tak:

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

Nic się nie psuje i nie narzekają na słuchaczy.

 1
Author: Mark Lancaster,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-09-25 13:48:44