什么是被动事件?
被动事件侦听器是 DOM 规范中的一项新功能,使开发人员能够通过消除滚动来阻止触摸和滚轮事件侦听器的需要来选择更好的滚动性能。开发人员可以使用 {passive: true} 注释触摸和滚轮监听器,以表明它们永远不会调用 PreventDefault。该功能在 Chrome 51、Firefox 49 中发布,并登陆 WebKit。参考 https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md.
Chrome 发出警告...
[Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive.
...当您绑定到鼠标滚动事件时,本质上是警告您可能通过调用来抑制事件中的滚动性能或禁用默认事件preventDefault()
.
当您尝试仍然调用时,Chrome 也会引发错误preventDefault()
在被动事件中。
Unable to preventDefault inside passive event listener invocation.
Firefox 也有类似的错误,但似乎不会像 Chrome 那样抛出警告:
Ignoring ‘preventDefault()’ call on event of type ‘wheel’ from a listener registered as ‘passive’.
警告展示
运行以下代码片段并以详细模式查看 Chrome 控制台。
// WILL throw violation
document.addEventListener("wheel", function(e) {
e.preventDefault(); // prevents default browser functionality
});
// will NOT throw violation
document.addEventListener("wheel", function(e) {
e.preventDefault(); // does nothing since the listener is passive
}, {
passive: true
});
解决问题
一个相似的SO post https://stackoverflow.com/questions/37721782/what-are-passive-event-listeners是关于这在 javascript 中的含义的。
通过将触摸或滚轮侦听器标记为被动,开发人员承诺处理程序不会调用preventDefault()
禁用滚动。这使浏览器能够立即响应滚动,而无需等待 JavaScript,从而确保为用户提供可靠、流畅的滚动体验。
Angular 尚未为此实现通用/易用的解决方案,可以遵循here https://github.com/angular/angular/issues/8866.
然而由于 typescript 被编译为 javascript,在打字稿中实现上述代码片段仍应消除违规行为.
性能影响
违规本身不会对应用程序性能造成任何损害,但事件函数的内容可能会造成损害 - 这就是 Chrome 抛出此警告的原因。请注意,此警告仅显示在Verbose console mode
并且不会向一般用户展示。
据我所知,没有办法禁用此类警告,因为它们是由 Chrome 在运行时解释代码生成的。