Розгляньте позначення обробника подій як "пасивного", щоб зробити сторінку більш чуйною

Я використовую молоток для перетягування, і він стає розбитим при завантаженні інших речей, як це попередження повідомляє мені.

Обробка події введення "touchstart" затримано на X мс через зайнятість основної нитки. Розгляньте позначення обробника подій як "пасивного", щоб зробити сторінку більш чуйною.

Тож я намагався так додати «пасивного» слухачеві

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

але я все одно отримую це попередження.

Для тих, хто отримує це попередження вперше, це пояснюється функцією крайового кровотоку під назвою Слухачі пасивних подій , яка впроваджена в браузери зовсім недавно (літо 2016 року). З https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md :

Слухачі пасивних подій - це нова особливість специфікації DOM, яка дозволяє розробникам увімкнути кращу продуктивність прокрутки, усуваючи необхідність прокрутки для блокування слухачів подій на дотик та колесо. Розробники можуть коментувати слухачів дотику та колеса за допомогою {passive: true}, щоб вказати, що вони ніколи не посилаються на prevenDefault. Ця функція постачається в Chrome 51, Firefox 49 та прибуває в WebKit. Повне офіційне пояснення читайте тут.

Дивитися також: Що таке пасивні слухачі подій?

Можливо, доведеться чекати, коли ваша бібліотека .js реалізує підтримку.

Якщо ви обробляєте події опосередковано через бібліотеку JavaScript, ви, можливо, будете сподіватися підтримки цієї конкретної бібліотеки для цієї функції. Станом на грудень 2019 року, схоже, жодна з основних бібліотек не реалізувала підтримку. Деякі приклади:

• jQuery.js - випуск, що триває: https://github.com/jquery/jquery/isissue/2871
• React.js - триває випуск: https://github.com/facebook/react/isissue/6436
• Hammer.js - закрито через відсутність подальших дій: https://github.com/hammerjs/hammer.js/pull/987
• perfect-scrollbar - закрито: https://github.com/noraesae/perfect-scrollbar/isissue/560
• AngularJS - закрито через не виправлення: https://github.com/angular/angular.js/isissue/15901

Тут ховається попереджувальне повідомлення:

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

Також зустрічайтеся з цим у випадаючому плагіні select2 у Laravel. Зміна значення, як запропонував Альфред Уоллес від

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

до

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

вирішує питання. Чому у нього є голос проти, я не знаю, але це працює на мене.

Для тих, хто застряг із застарілими проблемами, знайдіть рядок, що видаляє помилку, і додайте {passive: true}- наприклад:

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

стає

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

Для jquery-ui-dragable з jquery-ui-touch-punch я виправив його подібним до Івана Родрігеса, але з ще однією подією, що перекриває для 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') });
    }
};

Я знайшов рішення, яке працює на jQuery 3.4.1 slim

Після {passive: true}відміни даних додайте до функції addEventListener у рядку 1567 так:

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

Нічого не ламає і перевірки маяків не скаржаться на слухачів.