Rozważ oznaczenie modułu obsługi zdarzeń jako „pasywnego”, aby strona była bardziej responsywna

217

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

Obsługa zdarzenia wejściowego „touchstart” została opóźniona o X ms ze względu na zajęty główny wątek. Rozważ oznaczenie modułu obsługi zdarzeń jako „pasywnego”, aby strona była bardziej responsywna.

Próbowałem więc dodać „pasywną” do słuchacza w ten sposób

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

ale wciąż otrzymuję to ostrzeżenie.

Matt
źródło

Odpowiedzi:

264

Dla tych, którzy otrzymują to ostrzeżenie po raz pierwszy, wynika to z najnowocześniejszej funkcji o nazwie Pasywne nasłuchiwanie zdarzeń , która została zaimplementowana w przeglądarkach dość niedawno (lato 2016 r.). Od https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md :

Pasywne detektory zdarzeń to nowa funkcja w specyfikacji DOM, która umożliwia programistom włączenie lepszej wydajności przewijania, eliminując potrzebę przewijania w celu blokowania detektorów zdarzeń dotykowych i kołowych. Programiści mogą dodawać adnotacje do słuchaczy dotykowych i kołowych za pomocą {passive: true}, aby wskazać, że nigdy nie będą wywoływać funkcji zapobiegającej awarii. Ta funkcja została dostarczona w Chrome 51, Firefox 49 i wylądowała w WebKit. Pełne oficjalne wyjaśnienie znajduje się tutaj.

Zobacz także: Czym są nasłuchiwania zdarzeń pasywnych?

Może być konieczne poczekanie na wdrożenie biblioteki .js.

Jeśli zajmujesz się zdarzeniami pośrednio przez bibliotekę JavaScript, możesz być zdany na wsparcie tej funkcji dla tej konkretnej biblioteki. Według stanu na grudzień 2019 r. Żadna z głównych bibliotek nie ma obsługi. Kilka przykładów:

Anson Kao
źródło
16
co z bibliotekami jonowymi?
abhit
10
Dzwonię preventDefault()- czy można ukryć to ostrzeżenie?
maja
12
Google Maps JavaScript API wersja 3 również generuje te ostrzeżenia. Problem jest śledzony na stronie Issuetracker.google.com/issues/63211698 . (Trochę ironiczne, biorąc pod uwagę, że Google Chrome ostrzega przed naruszeniami, które generuje JavaScript API Google Maps.)
Jochem Schulenklopper
6
aby ukryć to ostrzeżenie, możesz `addEventListener ('touchstart', this.callPassedFuntion, {passive: false})`
Shlomi Schwartz
9

Ukrywa to komunikat ostrzegawczy:

jQuery.event.special.touchstart = {
  setup: function( _, ns, handle ) {
      this.addEventListener("touchstart", handle, { passive: !ns.includes("noPreventDefault") });
  }
};
Iván Rodríguez
źródło
6
Czy celem nie byłoby zatrzymanie rzeczywistego wydarzenia? Nie chciałbym ukrywać wiadomości, dopóki nie rozwiążę problemu.
yardpenalty.com
1
Myślę, że to kwestia biblioteki jquery. Myślę, że programiści muszą to naprawić. Ale jeśli go dostaniesz, daj mi znać, jak to zrobić, proszę. Dziękuję bardzo.
Iván Rodríguez
Na pewno Ivan! Tak to jest. Hej, teraz jestem ciekawy ... Używam wtyczki d3 i mam 2300 naruszeń. Może twój kod pomoże! Będę cię informować!
yardpenalty.com
@ yardpenalty.com, nie, zatrzymanie wydarzenia nie jest celem! Ostrzeżenie informuje, że umieściłeś detektor bez określania, czy może to uniemożliwić domyślne zachowanie zdarzenia. Jeśli masz przypadki, w których chcesz zadzwonić preventDefault(), powinieneś to określić passive: false. Jeśli nie, określ passive: true. Otrzymasz ostrzeżenie tylko, jeśli nie określisz żadnego z nich. Jeśli określisz passive: truei preventDefault()zostaniesz wywołany, spowoduje to błąd, a ustawienie domyślne nie zostanie zablokowane. Określanie passivenie jest tutaj hackowaniem. To jest rozwiązanie . O to prosi ostrzeżenie!
tao
@ dziękuję za komentarz. Minęło kilka lat, ale na pewno zapamiętam to rozwiązanie w przyszłości!
yardpenalty.com
1

Spotkaj się z tym również we wtyczce rozwijanej select2 w Laravel. Zmiana wartości zgodnie z sugestią Alfreda Wallace'a z

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

do

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

rozwiązuje problem. Dlaczego ma głos negatywny, nie wiem, ale to działa dla mnie.

Jun Salen
źródło
0

Dla tych, którzy utknęli ze starszymi problemami, znajdź linię zgłaszającą błąd i dodaj {passive: true}- np .:

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

staje się

this.element.addEventListener(t, e, { passive: true} )
Alfred Wallace
źródło
0

W przypadku jquery-ui-drag z jquery-ui-touch-punch naprawiłem to podobnie jak Iván Rodríguez, ale z jeszcze jednym zastąpieniem zdarzenia 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') });
    }
};
AndreyP
źródło
-1

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

Po cofnięciu minimalizacji dodaj {passive: true}do funkcji addEventListener w linii 1567 w następujący sposób:

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

Nic się nie psuje, a audyty latarni morskich nie narzekają na słuchaczy.

Mark Lancaster
źródło
2
nigdy nie zmieniaj kodu źródłowego biblioteki; powinieneś to zastąpić.
Raptor