Javascript 考虑将事件处理程序标记为“被动”以使页面更具响应性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39152877/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Consider marking event handler as 'passive' to make the page more responsive
提问by Matt
I am using hammer for dragging and it is getting choppy when loading other stuff, as this warning message is telling me.
我正在使用锤子进行拖动，并且在加载其他内容时变得断断续续，因为此警告消息告诉我。
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.
由于主线程繁忙，“touchstart”输入事件的处理延迟了 X 毫秒。考虑将事件处理程序标记为“被动”以使页面更具响应性。
So I tried to add 'passive' to the listener like so
所以我试图像这样为听众添加“被动”
Hammer(element[0]).on("touchstart", function(ev) {
// stuff
}, {
passive: true
});
but I'm still getting this warning.
但我仍然收到此警告。
回答by Anson Kao
For those receiving this warning for the first time, it is due to a bleeding edge feature called Passive Event Listenersthat has been implemented in browsers fairly recently (summer 2016). From https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md:
对于那些第一次收到此警告的人来说，这是由于最近（2016 年夏季）在浏览器中实现了一种称为被动事件侦听器的前沿功能。从https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md：
Passive event listenersare 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.
被动事件侦听器是 DOM 规范中的一项新功能，通过消除滚动阻止触摸和滚轮事件侦听器的需要，开发人员可以选择加入以获得更好的滚动性能。开发人员可以使用 {passive: true} 注释触摸和滚轮侦听器，以表明他们永远不会调用 preventDefault。此功能在 Chrome 51、Firefox 49 中提供，并在 WebKit 中登陆。有关完整的官方解释，请在此处阅读更多内容。
See also: What are passive event listeners?
另请参阅：什么是被动事件侦听器？
You may have to wait for your .js library to implement support.
您可能需要等待 .js 库实现支持。
If you are handling events indirectly via a JavaScript library, you may be at the mercy of that particular library's support for the feature. As of December 2019, it does not look like any of the major libraries have implemented support. Some examples:
如果您通过 JavaScript 库间接处理事件，您可能会受制于该特定库对该功能的支持。截至 2019 年 12 月，似乎没有任何主要图书馆实施支持。一些例子：
- jQuery.js- ongoing issue: https://github.com/jquery/jquery/issues/2871
- React.js- ongoing issue: https://github.com/facebook/react/issues/6436
- Hammer.js- closed due to no follow up: https://github.com/hammerjs/hammer.js/pull/987
- perfect-scrollbar- closed: https://github.com/noraesae/perfect-scrollbar/issues/560
- AngularJS- closed due to won't fix: https://github.com/angular/angular.js/issues/15901
- 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
- 完美滚动条- 关闭：https: //github.com/noraesae/perfect-scrollbar/issues/560
- AngularJS- 由于无法修复而关闭：https: //github.com/angular/angular.js/issues/15901
回答by Iván Rodríguez
This hides the warning message:
这将隐藏警告消息：
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 });
}
}
};
回答by Jun Salen
Also encounter this in select2 dropdown plugin in Laravel. Changing the value as suggested by Alfred Wallace from
在 Laravel 的 select2 下拉插件中也会遇到这个。按照 Alfred Wallace 的建议更改值
this.element.addEventListener(t, e, !1)
to
到
this.element.addEventListener(t, e, { passive: true} )
solves the issue. Why he has a down vote, I don't know but it works for me.
解决了这个问题。为什么他投反对票，我不知道，但这对我有用。
回答by Alfred Wallace
For those stuck with legacy issues, find the line throwing the error and add {passive: true}- eg:
对于那些遇到遗留问题的人，找到抛出错误的行并添加{passive: true}- 例如：
this.element.addEventListener(t, e, !1)
becomes
变成
this.element.addEventListener(t, e, { passive: true} )
回答by Mark Lancaster
I found a solution that works on jQuery 3.4.1 slim
我找到了一个适用于jQuery 3.4.1 slim的解决方案
After un-minifying, add {passive: true}to the addEventListener function on line 1567 like so:
取消缩小后，添加{passive: true}到第 1567 行的 addEventListener 函数，如下所示：
t.addEventListener(p, a, {passive: true}))
t.addEventListener(p, a, {passive: true}))
Nothing breaks and lighthouse audits don't complain about the listeners.
没有任何问题，灯塔审计不会抱怨听众。
