Unable to preventDefault inside passive event listener invocation报错

项目场景

• 最近在用vue3+ElementPlus+ts+vite开发中台，无疑中发现在使用ElInput这个组件的clearable属性时，无意中发现浏览器会报一个"Unable to preventDefault inside passive event listener invocation"错误
• 它并不影响使用，但是我看的很难受，因此想解决掉

问题描述

• 使用ElementPlus中的ElInput组件的clearable属性，浏览器控制台报"Unable to preventDefault inside passive event listener invocation"错误
  

原因分析

• "Unable to preventDefault inside passive event listener invocation"是浏览器开发中的一个警告信息。这个警告通常出现在使用passive事件监听器时，当在事件处理函数中调用preventDefault()方法时会引发该警告

解决方案

我也是参考大神的解决方案，在这里我整理了下

• 方案一
  如果你不想看到这个警告，可以考虑以下几种解决方法：

  1.使用非passive事件监听器：
  将passive属性设置为false，使事件处理函数能够正确地调用preventDefault()方法。

  2.在事件处理函数外部使用preventDefault()方法：
  将preventDefault()方法的调用放在passive事件监听器之外的地方，例如在事件处理函数的父级元素上进行事件委托。

  3.避免在passive事件监听器中调用preventDefault()方法：
  如果你的业务逻辑不依赖于阻止默认行为，可以考虑不调用preventDefault()方法，或者通过其他方式处理。

  需要注意的是，这个警告只是一个提醒，不会影响代码的正常执行。然而，在某些情况下，忽视这个警告可能会导致意外的行为或性能问题，所以建议开发者根据具体情况选择合适的解决方案。
  ————————————————
  该方案的原文链接

以上方法在我这里其实并不有用，但这个处理方法是有效的，在我这里没用，是因为，我如果这么改那就要动ElementPlus源码了，这并不是我想要的，其次我发现出现这个警告报错跟我安装的一个依赖有关系就是default-passive-events这个，如果卸载这个只会有警告而不是报错，但这个依赖是我同事要用的，我也不好删除，于是我借鉴了以下方法

• 方案二
  1.新建公用文件：browserPatch.ts（可以是在common目录或者untils目录，根据自己的项目定）

  ;(function () {
    if (typeof EventTarget !== 'undefined') {
      const func = EventTarget.prototype.addEventListener
      EventTarget.prototype.addEventListener = function (type, fn, capture) {
        ;(this as any).func = func
        if (typeof capture !== 'boolean') {
          capture = capture || {}
          capture.passive = false
        }
        ;(this as any).func(type, fn, capture)
      }
    }
  })()
  

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

  import '@/utils/browserPatch'
  

  问题就没有了，这是我在一个大神的博客上找到的，亲测有效
  ————————————————
  该方案的原文链接

结尾

• 其实在这个过程我发现了些其他问题，说是在vue3中使用echarts也会报这个错误，有大神说卸载default-passive-events这个依赖就行了，但我并没有遇到过，只是提一嘴
• 最后我也只是将解决问题的这个过程简述了下，可以说是站在前辈的肩膀上整理了下，并解决了这个问题，以上也有前辈的链接地址