react-dom.development.js:6878 Unable to preventDefault inside passive event list

69 阅读1分钟

import 'default-passive-events' 导致 antd react select 组件 下拉失效

报错:

react-dom.development.js:6878 Unable to preventDefault inside passive event listener invocation.

原理

{ passive: true } 是一个选项对象,通常用于在注册事件时向浏览器传递关于事件的配置信息。

具体来说,当我们在使用 addEventListener() 注册事件时,可以传递第三个参数为选项对象,以指定一些与事件相关的参数和配置。其中,{ passive: true } 表示使用一个被动的(passive)事件监听器,以优化页面性能。

被动事件监听器是浏览器的一个功能,用于改进滚动性能。当浏览器遇到注册事件时,它会阻塞页面的主线程,以等待事件处理程序完成。如果事件处理程序执行时间过长,就会导致页面卡顿和用户体验不佳。然而,被动事件监听器可以在不等待事件处理程序的情况下执行并执行默认行为,从而改善文件的滚动性能。

需要注意的是,被动事件监听器不能够调用 preventDefault() 方法阻止事件默认行为。因此,它只适用于那些已知不会调用 preventDefault() 方法的事件,例如滚动事件。

解决

移除 import 'default-passive-events';