考虑将事件处理程序标记为“被动”，以使页面响应更快

javascript jquery angularjs touch hammer.js

2022-08-30 00:29:54

我正在使用锤子进行拖动，并且在加载其他东西时会变得断断续续，正如此警告消息告诉我的那样。

由于主线程繁忙，“touchstart”输入事件的处理延迟了 X 毫秒。请考虑将事件处理程序标记为“被动”，以使页面响应更快。

所以我试图像这样给听众添加“被动”

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

但我仍然收到这个警告。

答案 1

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

被动事件侦听器是 DOM 规范中的一项新功能，它使开发人员能够通过消除滚动以阻止触摸和滚轮事件侦听器的需要来选择加入以提高滚动性能。开发人员可以使用 {passive： true} 对触摸和轮子侦听器进行注释，以指示他们永远不会调用 preventDefault。此功能在Chrome 51，Firefox 49中发布，并登陆WebKit。有关完整的官方说明，请在此处阅读更多内容。

另请参阅：什么是被动事件侦听器？

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

如果您通过 JavaScript 库间接处理事件，则可能会受到该特定库对该功能的支持的支配。截至 2019 年 12 月，看起来没有任何主要库已实现支持。一些例子：

jQuery.js - 持续存在的问题：https://github.com/jquery/jquery/issues/2871
React.js - 持续存在的问题：react 17 https://github.com/facebook/react/issues/6436
讨论：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

答案 2

这将隐藏警告消息：

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