解决elememt Plus报错：“Added non-passive event listener to a scroll-blocking ‘mousewheel‘ event.”

bestyellow

已于 2022-05-06 15:28:38 修改

阅读量3.3k

点赞数 7

分类专栏： js element ui 文章标签： html 前端 elementui

于 2022-03-14 09:26:03 首次发布

本文链接：https://blog.youkuaiyun.com/bestyellow/article/details/123470927

版权

js 同时被 2 个专栏收录

5 篇文章

订阅专栏

element ui

1 篇文章

订阅专栏

本文介绍了如何在ElementPlus 2.05中修复Chrome浏览器关于鼠标滚动警告的问题，通过修改ElementPlus源码并引入自定义isChrome检测，成功消除警告。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用Emement Plus 的el-table时，Chrome 浏览器会显示警告信息：

虽然不影响使用，但看着有点难受，只能想办去消除掉它

网上查了一下，都基本上是这种方法：

npm i default-passive-events -S
　main.js里引入
import 'default-passive-events'
我试了一下，没有效果，只能去改Element Plus的源码了
直接改Element Plus代码我现在使用的是Element Plus 2.05

node_modules\element-plus\es\utils\browser.mjs
  在const isFirefox = () => isClient && /firefox/i.test(window.navigator.userAgent);
  下添加
    const isChrome = () => isClient && /chrome/i.test(window.navigator.userAgent);
    export { isFirefox,isChrome };

 node_modules\element-plus\es\directives\mousewheel\index.mjs
  在if (isFirefox()) {
      element.addEventListener("DOMMouseScroll", fn);
    } 
  后添加    
    else if (isChrome()) {
      element.addEventListener("mousewheel", fn, {passive: true})
    }
  其引也要添加
   import { isChrome, isFirefox } from '../../utils/browser.mjs';

这是改后的截图，使用后世界都清凉了