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

Question

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

由于以下原因，“touchstart”输入事件的处理延迟了 X 毫秒

主线程忙。考虑将事件处理程序标记为“被动”以

使页面更具响应性。

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

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

但我仍然收到此警告。

原文由 Matt 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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 - 持续问题： 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

原文由 Anson Kao 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

以下库解决了这个问题。

只需将此代码添加到您的项目中。

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

如果您需要更多信息，请访问该 图书馆。

原文由 Shanaka Rathnayaka 发布，翻译遵循 CC BY-SA 4.0 许可协议