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

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

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

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

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

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

Источник

10 ответов

Решение

Для тех, кто получает это предупреждение впервые, это связано с новейшей функцией 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 года, похоже, что ни в одной из основных библиотек не реализована поддержка. Некоторые примеры:

Источник

Следующая библиотека решила проблему.
Просто добавьте этот код в свой проект.

      <script type="text/javascript" src="https://unpkg.com/default-passive-events"></script>

Если вам нужна дополнительная информация, посетите эту библиотеку .

Источник

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

    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 });
        }
      }
    };
Источник

Для 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') });
    }
};
Источник

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

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

становится

this.element.addEventListener(t, e, { passive: true} )
Источник

Предупреждение выдается только в том случае, если вы не укажетеpassive.

Чтобы подавить это предупреждение, вы можете:

      addEventListener('touchstart', this.callPassedFuntion, { 
  passive: false 
})

По умолчанию браузер слушаетpreventDefault. Итак, он будет слушать, но даст вам знать: эй, вы можете улучшить свое приложение здесь. Если нет, дайте мне знать, что вы не можете (заявив:passive: false).

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

Источник

Также встретите это в плагине выпадающего списка select2 в Laravel. Изменение значения по предложению Альфреда Уоллеса из

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

к

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

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

Источник

Я думаю, что в дополнение к сенсорным событиям вы можете добавить исправления на основе прокрутки, чтобы оценка страницы Google не помечала его для настольных компьютеров и мобильных устройств:

// Пассивные прослушиватели событий (Tw0 небольшие вариации в установке флага)

      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.event.special.wheel = {
    setup: function( _, ns, handle ){
        this.addEventListener("wheel", handle, { passive: true });
    }
};
jQuery.event.special.mousewheel = {
    setup: function( _, ns, handle ){
        this.addEventListener("mousewheel", handle, { passive: true });
    }
};
Источник

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

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

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

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

Источник

Я столкнулся с той же проблемой. Затем я использовал это

<script type="text/javascript" src="https://unpkg.com/default-passive-events"></script>

И, надеюсь, ваши проблемы будут решены.

Источник
Другие вопросы по тегам