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

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

Обработка входного события "touchstart" задерживалась на X ms из-за основная нить занята. Рассмотрите маркировку обработчика событий как "пассивную" сделайте страницу более отзывчивой.

Итак, я попытался добавить "passive" к слушателю так:

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

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

Ответ 1

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

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

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

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

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

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

Ответ 2

это скрыть сообщение

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

Ответ 3

Я нашел решение, которое работает на jQuery 3.4.1 slim

После отмены минимизации добавьте {passive: true} к функции addEventListener в строке 1567 следующим образом:

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

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