React js -[Violation] 向阻止滚动的“鼠标滚轮”事件添加了非被动事件侦听器答案

【问题标题】：React js -[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' eventReact js -[Violation] 向阻止滚动的“鼠标滚轮”事件添加了非被动事件侦听器
【发布时间】：2018-07-15 06:38:47
【问题描述】：

我正在使用选择元素和 onChange 事件的一个代码处理 React js。

  handleChange = (event) => {
        this.setState({value: event.target.value});
    }

    render() {
        return (
            <div>         
               <label>
                List
                    <select value={this.state.value} onChange={this.handleChange}>
                        <option value="one">One</option>
                        <option value="two">Two</option>
                    </select>
                </label>
            </div>
        )

但我在 chrome 中一次又一次地收到此警告。 “[违规] 向阻止滚动的“鼠标滚轮”事件添加了非被动事件侦听器。考虑将事件处理程序标记为“被动”以使页面更具响应性。”。有没有解决办法。

【问题讨论】：

您确定是这个组件导致了问题吗？我很确定你有一个外部或外部脚本在监听鼠标滚轮事件（这个组件甚至不接触鼠标滚轮。）
是的，每当我点击选择时，我都会收到此警告
只渲染一个简单的<select> 没有处理程序。这必须是外部脚本。
删除了handleChange，还是一样的警告
开始检查页面上的其他脚本。您有一个正在监听鼠标滚轮的外部事件，它恰好在您选择下拉菜单时触发。

标签： javascript reactjs react-redux react-router passive-event-listeners

【解决方案1】：

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

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

不久前我正在处理此类问题，并创建了一个包，该包将覆盖EventTarget.prototype.addEventListener，并将passive 选项添加到所有不支持preventDefault 的事件以及浏览器是否支持它。

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

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

import { passiveSupport } from 'passive-events-support/src/utils'

passiveSupport(['mousewheel'])

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

【讨论】：