Angular 4-向滚动阻止的"mousewheel"事件添加了非被动事件侦听器. [英] Angular 4 - Added non-passive event listener to a scroll-blocking 'mousewheel' event.

查看:758
本文介绍了Angular 4-向滚动阻止的"mousewheel"事件添加了非被动事件侦听器.的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

In my Angular 4 Project I get the following warning when I click on a date-picker or a select-option menu, running it in Google Chrome:

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

[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'的问题.我真的不知道我能给你什么代码示例,因为我不知道警告来自哪里. 有人可以帮我解决这个问题吗?

I already saw an issue here on stack-overflow but that one was about 'touchstart', not 'mousewheel'. I don't really know what Code-examples I could give you because I don't know where the warning comes from. Can anybody help me with this issue?

推荐答案

什么是被动事件?

被动事件侦听器是DOM规范中的一项新功能,使开发人员可以选择消除滚动来阻塞触摸和滚轮事件侦听器,从而选择更好的滚动性能.开发人员可以使用{passive:true}注释触摸和滚轮侦听器,以表示他们将永远不会调用preventDefault. Chrome 51,Firefox 49附带了此功能,WebKit附带了此功能. 参考.

Chrome发出警告...

Chrome throws the warning ...

[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()来抑制事件的滚动性能或禁用默认事件.

...when you bind to mouse scroll events, to essentially warn that you may have inhibited scroll performance in your event or disabled default events by making a call to preventDefault().

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

Chrome also throws the error when you try and still call preventDefault() in a passive event.

Unable to preventDefault inside passive event listener invocation.

Firefox对此有类似的错误,但是似乎没有像Chrome一样发出警告:

Firefox has a similar error for this, however does not seem to throw a warning like Chrome:

Ignoring ‘preventDefault()’ call on event of type ‘wheel’ from a listener registered as ‘passive’.


警告展示柜

运行以下代码段,并在详细模式下查看Chrome控制台.


Warning showcase

Run the following snippet and view the Chrome console in Verbose mode.

// 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帖子. /p>

A similar SO post was made about the implications of this in javascript.

通过将触摸或滚轮侦听器标记为被动,开发人员保证处理程序不会调用preventDefault()来禁用滚动.这样可以释放浏览器,使其立即响应滚动,而无需等待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尚未为此实现通用/易用的解决方案,可以在此处遵循.

Angular has not yet implemented a generic / ease of use solution for this and can be followed here.

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

However due to the fact that typescript is compiled to javascript, implementing the above snippet in typescript should still negate the violation.

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

The violation itself is not at all harmful to application performance, however the contents of your event function could be - and thus is why Chrome throws this warning. Note that this warning is only shown in Verbose console mode and will not be shown to general users.

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

As far as I am aware, there is no way to disable such warnings as they are generated by Chrome's interpretation of the code at run time.

这篇关于Angular 4-向滚动阻止的"mousewheel"事件添加了非被动事件侦听器.的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆