ReactJS - 向滚动阻塞的“鼠标滚轮”事件添加了非被动事件侦听器

Question

我有一个选择菜单，其中有一些选项。 我使用 React JS 创建了我的项目，并将 Foundation.Zurb 框架添加到我的项目中。

当我单击选择菜单选项之一时，我在控制台中收到此错误：

[违规] 向阻止滚动的“鼠标滚轮”事件添加了非被动事件侦听器。 考虑将事件处理程序标记为“被动”以使页面更具响应性。 请参阅https://www.chromestatus.com/feature/5745543795965952 >

我尝试了几个解决方案，但没有一个奏效。 可能是什么原因，我该如何解决？

Answer 1

基本上，如果不调用preventDefault() ，则所有scroll和touch事件都希望是“被动的”。 但这并不容易..

1. 并非所有浏览器都支持被动事件侦听器选项。
2. 如果是导致警告的第 3 方代码，修改它的源代码是一个糟糕的坏习惯。
3. 像default-passive-events这样的软件包 jsut 盲目地应用被动属性而忽略了preventDefault()的使用，这可能会导致您的脚本中断..
4. 对所有事件应用passive: false将消除警告，但不会提高性能。 那有什么意义呢？

不久前我正在处理这样的问题，并创建了一个覆盖EventTarget.prototype.addEventListener的包，并向所有不preventDefault的事件添加passive选项，如果浏览器支持它。

https://www.npmjs.com/package/passive-events-support

这不仅消除了警告，还提高了性能。 确保只传递必要的事件而不是默认事件。 在这种情况下，只需“鼠标滚轮”：

<script>
  window.passiveEvents = ['mousewheel']
</script>
<script type="text/javascript" src="node_modules/passive-events-support/dist/main.js"></script>

如果你想要一个模块化的方式，你可以在文档中找到一个例子。 确保在导致该警告的任何其他脚本之前导入此脚本。