考虑将事件处理程序标记为 'passive' 以使页面更具响应性

Question

我正在使用锤子进行拖动，加载其他东西时它变得不稳定，正如这条警告消息告诉我的那样。

Handling of 'touchstart' input event was delayed for X ms due to main thread being busy. Consider marking event handler as 'passive' to make the page more responsive.

所以我尝试像这样将'passive'添加到监听器

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

但我仍然收到此警告。

Answer 1

对于那些第一次收到此警告的人来说，这是由于最近（2016 年夏季）在浏览器中实现了名为 被动事件侦听器 的前沿功能。来自 https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md:

Passive event listeners are a new feature in the DOM spec that enable developers to opt-in to better scroll performance by eliminating the need for scrolling to block on touch and wheel event listeners. Developers can annotate touch and wheel listeners with {passive: true} to indicate that they will never invoke preventDefault. This feature shipped in Chrome 51, Firefox 49 and landed in WebKit. For full official explanation read more here.

另请参阅：

您可能需要等待您的 .js 库实现支持。

如果您通过 JavaScript 库间接处理事件，您可能会受制于该特定库对该功能的支持。截至 2019 年 12 月，似乎还没有任何主要图书馆实施支持。一些例子：

jQuery.js - 持续问题：https://github.com/jquery/jquery/issues/2871
React.js - 持续问题：https://github.com/facebook/react/issues/6436
React 17 讨论：https://github.com/facebook/react/issues/19651
Hammer.js - 由于没有跟进而关闭：https://github.com/hammerjs/hammer.js/pull/987
完美滚动条 - 关闭： https://github.com/noraesae/perfect-scrollbar/issues/560
AngularJS - 由于无法修复而关闭：https://github.com/angular/angular.js/issues/15901

Answer 2

这会隐藏警告消息：

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

Answer 3

我找到了适用于 jQuery 3.4.1 slim

的解决方案

取消缩小后，将 {passive: true} 添加到第 1567 行的 addEventListener 函数中，如下所示：

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

没有任何中断，灯塔审计不会抱怨听众。

Answer 4

对于那些被遗留问题困扰的人，找到引发错误的行并添加 {passive: true} - 例如：

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

变成

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

Answer 5

在 Laravel 的 select2 下拉插件中也遇到了这个问题。根据 Alfred Wallace 的建议更改值

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

至

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

问题已解决。为什么他有反对票，我不知道，但这对我有用。

Answer 6

对于 jquery-ui-draggable with jquery-ui-touch-punch 我修复它类似于 Iván Rodríguez，但多了一个事件覆盖触摸移动：

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

Answer 7

我认为除了基于触摸的事件之外，您还可以添加基于滚动的修复，以防止 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 });
    }
};

Answer 8

以下库解决了该问题。
只需将此代码添加到您的项目中。

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

如果您需要更多信息，请访问此 library。

考虑将事件处理程序标记为 'passive' 以使页面更具响应性

Consider marking event handler as 'passive' to make the page more responsive

javascript

jquery

touch

angularjs

hammer.js

您可能需要等待您的 .js 库实现支持。