在我的 Angular 4 项目中，当我单击日期选择器或选择选项菜单并在 Google Chrome 中运行时收到以下警告：
[违规] 向阻止滚动的“鼠标滚轮”事件添加了非被动事件侦听器。考虑将事件处理程序标记为“被动”以使页面更具响应性。
我已经在 stack-overflow 上看到了一个问题，但那个问题是关于“touchstart”，而不是“mousewheel”。我真的不知道我可以给你什么代码示例，因为我不知道警告来自哪里。 有人可以帮我解决这个问题吗？
【问题讨论】：
标签： angular google-chrome event-listener mousewheel
被动事件侦听器是 DOM 规范中的一项新功能，它使开发人员能够通过消除滚动来阻止触摸和滚轮事件侦听器的需要来选择加入以提高滚动性能。开发人员可以使用 {passive: true} 注释触摸和滚轮侦听器，以表明他们永远不会调用 preventDefault。此功能在 Chrome 51、Firefox 49 中提供，并在 WebKit 中登陆。 Reference.
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() 从本质上警告您可能在事件中抑制了滚动性能或禁用了默认事件。
当您尝试在被动事件中调用 preventDefault() 时，Chrome 也会引发错误。
Unable to preventDefault inside passive event listener invocation.
Firefox 也有类似的错误，但似乎没有像 Chrome 那样抛出警告：
Ignoring ‘preventDefault()’ call on event of type ‘wheel’ from a listener registered as ‘passive’.
运行以下 sn-p 并以 Verbose 模式查看 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 是关于这在 javascript 中的含义。
通过将触摸或滚轮侦听器标记为被动，开发人员承诺处理程序不会调用
preventDefault()来禁用滚动。这让浏览器可以立即响应滚动而无需等待 JavaScript，从而确保为用户提供可靠流畅的滚动体验。
Angular 尚未为此实现通用/易用的解决方案，可以关注here。
但是由于 typescript 被编译为 javascript，在 typescript 中实现上述 sn-p 仍然应该否定违规。
违规本身对应用程序性能没有任何危害，但您的事件函数的内容可能会受到影响 - 这就是 Chrome 抛出此警告的原因。请注意，此警告仅在Verbose console mode 中显示，不会向普通用户显示。
据我所知，无法禁用此类警告，因为它们是由 Chrome 在运行时对代码的解释生成的。
【讨论】：