Angular 被动事件监听器
Posted
技术标签:
【中文标题】Angular 被动事件监听器【英文标题】：Angular Passive Event Listeners 【发布时间】：2020-03-27 04:05:52 【问题描述】：关于这个话题how to make an event listener passive in Angular，互联网上空无一人，真是令人震惊。
我有一个下拉菜单，在滚动时会在 Chrome 中引发错误：
[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive....
Google 抛出此错误的动机和问题本身对我来说非常清楚，并且我知道解决方案。我需要在我的 Angular 代码中进行类似的工作：document.addEventListener('wheel', (e) => e.preventDefault() , passive: false ); 但似乎解决方案比我想象的更难实现。 Angular 无法将事件侦听器设置为 passive: false，而我在上面粘贴的 vanilla JS 根本不起作用。
有没有人遇到过类似的问题/解决方案？ 也许有解决方法？ 任何相关信息都可能很有价值，谢谢。
【问题讨论】：
嗨 SharisM，你能试试使用https://angular.io/api/core/HostListener 吗？您可能会选择在那里使用或优化行为。
你好@mikegross，我很快就会试一试，我们会看看结果如何。谢谢。
@mikegross，试过了，但也没有用。也许您可以具体说明您的想法？谢谢
【参考方案1】：
如https://angular.io/guide/user-input中指定：
(window as any)['__zone_symbol__PASSIVE_EVENTS'] = ['scroll'];
可以在 polyfills 中添加，这将使滚动事件的事件监听器被动
【讨论】：
您链接的页面已被标记为归档。这是一个更好的链接：angular.io/guide/event-binding#binding-to-passive-events.以上是关于Angular 被动事件监听器的主要内容，如果未能解决你的问题，请参考以下文章
在 onWheel 事件中使用 event.preventDefault 时，如何规避 reactjs 中的“被动事件监听器”
[Violation] 向 Angular 4 项目中的滚动阻止“touchstart”事件添加非被动事件侦听器是啥意思？