Question

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

[Violation]向滚动阻止的“ mousewheel”事件添加了非被动事件侦听器。考虑将事件处理程序标记为“被动”，以使页面更具响应性。

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

Answer 1

什么是被动事件？

被动事件侦听器是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’.

警告展示柜

运行以下代码段，并在详细模式下查看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
});

解决问题

在javascript中对此进行了类似的说明SO post。

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

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

但是，由于打字稿已编译为javascript，在打字稿中实施上述代码段仍应消除违规行为。

性能影响

冲突本身对应用程序性能完全没有危害，但是事件函数的内容可能是-因此，这就是Chrome引发此警告的原因。请注意，此警告仅显示在Verbose console mode中，而不会向一般用户显示。

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

Angular 4-向滚动阻止的“ mousewheel”事件添加了非被动事件侦听器。

1 个答案:

什么是被动事件？

警告展示柜

解决问题

性能影响