【无标题】

描述

在使用element-plus的一些表单组件时，会报如下错误：[Violation] Added non-passive event listener to a

在谷歌浏览器中，使用element-plus的一些表单组件时，会报如下错误：[Violation] Added non-passive event listener to a scroll-blocking ‘touchstart’ event. Consider marking event handler as ‘passive’ to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952（将非被动事件侦听器添加到滚动阻止的“touchstart”事件中。请考虑将事件处理程序标记为“被动”，以提高页面的响应能力）

当应用中用到滚动事件scroll、滚轮事件wheel或者移动端touchstart/touchmove/touchend等事件时会报这样的警告，通过排查我的项目中是在使用了：TimePicker 时间选择器组件、DatePicker 日期选择器组件和Input Number 数字输入框等组件时会报这样的错误。

网上提供了两种解决方案是，我们先说第一种：安装default-passive-events插件。

使用命令：

npm i default-passive-events -S 

安装default-passive-events，然后再在main.js中进行引入：

import 'default-passive-events'

安装完成后，确实是不再警告了。但是问题并没有结束，当我们再使用el-input组件时，如果带有clearable 清空属性时，当点击清空图标时，会报Unable to preventDefault inside passive event listener invocation的错误（无法在被动事件侦听器调用中防止Default的错误）：

<el-input clearable v-model="val"></el-input>

另外，据说使用echart时，也会报同样的错误，虽然这个错误包括上面的警告信息都不影响页面的正常使用，但是一个不断报错报警告的应用总是会让人产生一些不踏实的感觉。

解决

网上也提供了关于Unable to preventDefault inside passive event listener invocation这个错误的解决方法，但是测试过几个，要么不能用，要么就是需要改动element-plus的源码，因此，我决定还是先回归到最上面的警告问题上，毕竟后面的报错，是因为我们装了default-passive-events之后才出现的，所以，这里我们先卸载掉default-passive-events，尝试另一种解决方案：

新建公用文件：browser_patch.js（可以是在common目录或者untils目录，根据自己的项目定）。

文件内容如下：

//去除谷歌浏览器的scroll、wheel等事件警告
(function () {
    if (typeof EventTarget !== "undefined") {
        let func = EventTarget.prototype.addEventListener;
        EventTarget.prototype.addEventListener = function (type, fn, capture) {
            this.func = func;
            if (typeof capture !== "boolean") {
                capture = capture || {};
                capture.passive = false;
            }
            this.func(type, fn, capture);
        };
    }
}())

然后再在main.js文件中，引入该文件：

import '@/utils/browser_patch'

这种方案的解决思路是调整事件对象addEventListener的原型，通过该解决方式处理之后，谷歌浏览器不再报警告信息，也不会再引发新的错误。¹

---

1. 参考 ↩︎