Angular 4 - 向滚动阻止“鼠标滚轮”事件添加非被动事件侦听器。

Question

在我的 Angular 4 项目中，当我单击日期选择器或选择选项菜单并在 Google Chrome 中运行时，会收到以下警告：

[违规] 向滚动阻塞“鼠标滚轮”事件添加了非被动事件侦听器。考虑将事件处理程序标记为“被动”以使页面响应更快。

我已经在这里看到了有关堆栈溢出的问题，但该问题与“touchstart”有关，而不是与“鼠标滚轮”有关。我真的不知道可以给你什么代码示例，因为我不知道警告来自哪里。有人可以帮我解决这个问题吗？

Answer 1

什么是被动事件？

\n\n

\n

被动事件侦听器是 DOM 规范中的一项新功能，使开发人员能够通过消除滚动来阻止触摸和滚轮事件侦听器的需要来选择更好的滚动性能。开发人员可以使用 {passive: true} 注释触摸和滚轮监听器，以表明它们永远不会调用 PreventDefault。该功能在 Chrome 51、Firefox 49 中发布，并登陆 WebKit。参考。

\n

\n\n

Chrome 发出警告...

\n\n

[Violation] Added non-passive event listener to a scroll-blocking \'wheel\' event. Consider marking event handler as \'passive\' to make the page more responsive.\n

\n\n

...当您绑定到鼠标滚动事件时，本质上是警告您可能通过调用 来抑制事件中的滚动性能或禁用默认事件preventDefault()。

\n\n

preventDefault()当您尝试仍然在被动事件中调用时，Chrome 也会引发错误。

\n\n

Unable to preventDefault inside passive event listener invocation.\n

\n\n

Firefox 也有类似的错误，但似乎不会像 Chrome 那样抛出警告：

\n\n

Ignoring \xe2\x80\x98preventDefault()\xe2\x80\x99 call on event of type \xe2\x80\x98wheel\xe2\x80\x99 from a listener registered as \xe2\x80\x98passive\xe2\x80\x99.\n

\n\n\n\n

警告展示

\n\n

运行以下代码片段并以详细模式查看 Chrome 控制台。

\n\n

\r\n

\r\n

[Violation] Added non-passive event listener to a scroll-blocking \'wheel\' event. Consider marking event handler as \'passive\' to make the page more responsive.\n

\r\n

\r\n

\r\n

\n\n

\n\n

解决问题

\n\n

类似的SO 帖子是关于 JavaScript 中的含义的。

\n\n

\n

通过将触摸或滚轮侦听器标记为被动，开发人员承诺处理程序不会调用preventDefault()来禁用滚动。这使浏览器能够立即响应滚动，而无需等待 JavaScript，从而确保为用户提供可靠、流畅的滚动体验。

\n

\n\n

Angular 尚未为此实现通用/易用的解决方案，可以在此处遵循。

\n\n

然而，由于 typescript 被编译为 javascript，因此在 typescript 中实现上述代码片段仍应消除违规行为。

\n\n\n\n

性能影响

\n\n

违规本身不会对应用程序性能造成任何损害，但事件函数的内容可能会造成损害 - 这就是 Chrome 抛出此警告的原因。请注意，此警告仅显示在一般用户中Verbose console mode，不会显示给一般用户。

\n\n

据我所知，没有办法禁用此类警告，因为它们是由 Chrome 在运行时解释代码生成的。

\n