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

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.

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:

• jQuery.js - bieżący problem: https://github.com/jquery/jquery/issues/2871
• React.js - bieżący problem: https://github.com/facebook/react/issues/6436
• Hammer.js - zamknięty z powodu braku dalszych działań: https://github.com/hammerjs/hammer.js/pull/987
• perfect-scrollbar - zamknięty: https://github.com/noraesae/perfect-scrollbar/issues/560
• AngularJS - zamknięty, ponieważ nie można go naprawić: https://github.com/angular/angular.js/issues/15901

Ukrywa to komunikat ostrzegawczy:

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

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.

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

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

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.