Angular 4 - 向滚动阻塞 'mousewheel' 事件添加了非被动事件监听器。

Question

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

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

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

Answer 1

什么是被动事件？

Passive event listeners are 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. 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.

...当您绑定(bind)到鼠标滚动事件时，本质上警告您可能通过调用 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
});

---

解决问题

类似SO post是关于 this 在 javascript 中的含义的。

By marking a touch or wheel listener as passive, the developer is promising the handler won't call preventDefault() to disable scrolling. This frees the browser up to respond to scrolling immediately without waiting for JavaScript, thus ensuring a reliably smooth scrolling experience for the user.

Angular 还没有为此实现一个通用/易用的解决方案，可以遵循 here .

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

---

性能影响

违规行为本身对应用程序性能没有任何危害，但您的事件函数的内容可能会 - 因此 Chrome 会抛出此警告。请注意，此警告仅在 Verbose console mode 中显示，不会向一般用户显示。

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