Пометьте обработчик событий как пассивный, чтобы сделать страницу более отзывчивой

Я использую молоток для перетаскивания, и он загружается другими вещами, как это предупреждающее сообщение говорит мне.

Обработка события ввода «touchstart» была отложена на X мс из-за того, что основной поток занят. Пометьте обработчик событий как пассивный, чтобы сделать страницу более отзывчивой.

Поэтому я попытался добавить «пассивный» слушателю так

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

но я все еще получаю это предупреждение.

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

Пассивные прослушиватели событий - это новая функция в спецификации DOM, которая позволяет разработчикам подключаться для повышения производительности прокрутки, устраняя необходимость в прокрутке, чтобы блокировать приемники событий касания и прокрутки. Разработчики могут пометить слушателей касанием и колесом с помощью {passive: true}, чтобы указать, что они никогда не будут вызывать warnDefault. Эта функция поставляется в Chrome 51, Firefox 49 и включена в WebKit. Для полного официального объяснения читайте больше здесь.

Смотрите также: Что такое пассивные слушатели событий?

Возможно, вам придется подождать, пока ваша библиотека .js не осуществит поддержку.

Если вы обрабатываете события косвенно через библиотеку JavaScript, вы можете зависеть от поддержки этой библиотеки этой функцией. По состоянию на декабрь 2019 года, похоже, что ни одна из основных библиотек не реализовала поддержку. Некоторые примеры:

• jQuery.js - текущая проблема: https://github.com/jquery/jquery/issues/2871
• React.js - текущая проблема: https://github.com/facebook/react/issues/6436
• Hammer.js - закрыт из-за отсутствия последующих действий : https://github.com/hammerjs/hammer.js/pull/987
• perfect-scrollbar - закрыт: https://github.com/noraesae/perfect-scrollbar/issues/560
• AngularJS - закрыт из-за не исправления: https://github.com/angular/angular.js/issues/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 я исправил его аналогично Iván Rodríguez, но с еще одним переопределением событий для 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}))

Ничто не ломается, и проверки маяков не жалуются на слушателей.