vue element chrome 警告信息non-passive event listener解决

最新推荐文章于 2024-08-20 12:36:38 发布
最新推荐文章于 2024-08-20 12:36:38 发布
阅读量2.9k 收藏 7
点赞数 1
分类专栏： chrome警告信息 JavaScript 文章标签： chrome vue.js elementui chrome devtools 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36350600/article/details/120339555
版权
本文介绍了在使用Element Plus时遇到Chrome浏览器关于非被动事件监听器的警告问题，特别是在<el-table>组件中。提供了解决此警告的两种方法：一是通过安装default-passive-events库并在main.js中引入；二是直接修改element-plus源代码，添加passive选项。这两种方法旨在提高页面响应性并消除滚动阻塞警告。
摘要由CSDN通过智能技术生成

目录

前言

用element-plus搞项目的时候一直报下面这个警告, 主要是在用<el-table></el-table>的地方
想要知道关于警告详情的,可以参考博文下发的参考链接,我就不多赘述了

[Violation] Added non-passive event listener to a scroll-blocking ‘mousewheel’ event. Consider marking event handler as ‘passive’ to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

解决方法

方法一(安装default-passive-events)

先终端运行以下命令

npm install default-passive-events --save

再在main.js引入

import ‘default-passive-events’

这是网上的通用做法,但我没生效:(

方法二(修改element-plus源代码)

"element-plus": "1.0.2-beta.71"
先打开 node_modules/element-plus/es/directives/index.js文件
Ctrl+F搜索(const mousewheel)附近
在 co

最低0.47元/天 解锁文章
yinzswang
关注
专栏目录
【Vue3】解决element ui plus “Added non-passive event listener to a scroll-blocking ‘mousewheel‘ event.”
woodwhale的博客
04-06 2303
【Vue3】解决element ui plus “Added non-passive event listener to a scroll-blocking ‘mousewheel‘ event.” 如图，直接改element ui plus的源码 第一步： import { isClient } from '@vueuse/core'; const isFirefox = () => isClient && /firefox/i.test(window.navigator.use
[Violation] Added non-passive event listener to a scroll-blocking ‘touchstart‘ event. Consider marki
qq_39196447的博客
01-30 991
【代码】[Violation] Added non-passive event listener to a scroll-blocking ‘touchstart‘ event. Consider marki。
Added non-passive event listener to a scroll-blocking ＜some＞ event. Consider marking event handler a
最新发布
jieyucx的博客
08-20 872
被动模式的事件监听器可以提升滚动性能，因为它们不会阻止浏览器在事件触发时进行默认的滚动行为。这个警告是因为在监听滚动事件时，没有指定事件处理程序为被动的(passive)，可能会导致页面滚动时出现性能问题。从源头讲在添加事件监听的地方，为事件处理程序加上一个对象，包含passive: true的属性，表示这个事件处理程序是被动的。这在某些情况下可能是必要的，例如需要阻止触摸事件的默认滚动行为。具体来说，它的作用是确保所有添加的事件监听器的 passive。是一个接口，所有可以接收事件的对象（如。
解决elememt Plus报错：“Added non-passive event listener to a scroll-blocking ‘mousewheel‘ event.”
bestyellow的专栏
03-14 3240
使用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...
vue项目non-passive event listener问题
qq_40352933的博客
12-22 1208
vue项目non-passive event listener问题使用element-ui时出现警告[Violation] Added non-passive event listener to a scroll-blocking ‘mousewheel’ event. Consider marking event handler as ‘passive’ to make the page more responsive问题原因：没有添加被动事件监听器来阻止'touchstart'事件，请考虑添加事件管理者
[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event.
热门推荐
weixin_40716786的博客
05-09 5万+
在基于 Element-ui 写项目的时候，Chrome 提醒： [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive. ...
谷歌浏览器警告：Added non-passive event listener to a scroll-blocking ‘wheel‘ event
我是小妖yun的博客
08-25 2332
谷歌浏览器警告： [Violation] Added non-passive event listener to a scroll-blocking ‘wheel’ event. Consider marking event handler as ‘passive’ to make the page more responsive. 解决方法 > npm install --save default-passive-events main.js import 'default-passive-eve
Vue 09Vue中使用行内样式---class
mqingo的博客
01-02 2758
09Vue中使用样式---class.html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;09Vue中使用样式----class&lt;/title&gt; &lt;script type="text/javascript
Vue 08使用v-model实现计算器
mqingo的博客
01-02 608
08使用v-model实现计算器.html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;08使用v-model实现计算器&lt;/title&gt; &lt;script type="text/javascript&quot
Vue 13v-for循环对象.html
mqingo的博客
01-02 2316
13v-for循环对象.html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;13v-for循环对象&lt;/title&gt; &lt;script type="text/javascript" src=&quo
Added non-passive event listener to a scroll-blocking ‘touchstart‘ event. 警告解决记录
m0_58031031的博客
03-10 781
default-passive-events插件。然后在项目的main.js引入。
在vue项目中解决Chrome控制台non-passive event listener输出问题
龙泉诗
06-19 2万+
前言 记录软件开发点滴，积累知识和经验（第四篇） 复现问题 要做什么？ 目标：解决在使用element-ui时出现警告[Violation] Added non-passive event listener to a scroll-blocking ‘mousewheel’ event. Consider marking event handler as ‘passive’ to make th...
关于Added non-passive event listener to a scroll-blocking ‘wheel‘ event. Consider marking event handle
zsj702177的博客
08-17 8151
Passive Event Listeners：就是告诉前页面内的事件监听器内部是否会调用preventDefault函数来阻止事件的默认行为，以便浏览器根据这个信息更好地做出决策来优化页面性能。当属性passive的值为true的时候，代表该监听器内部不会调用preventDefault函数来阻止默认滑动行为，Chrome浏览器称这类型的监听器为被动（passive）监听器。违反：没有添加被动事件监听器来阻止’touchstart’事件，请考虑添加事件管理者’passive’，以使页面更加流畅。...
Vue控制台警告： Added non-passive event listener to a scroll-blocking ‘touchmove‘ event. Consider markin
weixin_45716754的博客
08-25 1703
Passive Event Listeners：就是告诉前页面内的事件监听器内部是否会调用preventDefault函数来阻止事件的默认行为，以便浏览器根据这个信息更好地做出决策来优化页面性能。当属性passive的值为true的时候，代表该监听器内部不会调用preventDefault函数来阻止默认滑动行为，Chrome浏览器称这类型的监听器为被动（passive）监听器。违反：没有添加被动事件监听器来阻止’touchstart’事件，请考虑添加事件管理者’passive’，以使页面更加流畅。
ElementUI校验[Violation] Added non-passive event listener to a scroll-blocking ‘touchmove‘ event. 问题解决
每天都要努力学习哦~~
10-27 3067
这段代码是一个自执行的函数，其主要目的是修改浏览器中的事件监听器（Event Listener）行为。，同时保留了原始的事件监听器方法，以不影响现有的代码逻辑。这就是为什么它保留了原始方法的原因，以确保事件监听器的行为不受太大影响。，浏览器会等待该函数执行完毕后再进行滚动，这可能导致滚动的延迟。最后，代码调用了原始的事件监听器方法，传递了相同的参数，包括修改后的。的形式，这意味着这段代码会在加载时立即执行，而不需要显式调用。是用于处理事件的基本对象，通常在现代浏览器中是定义的。然后，它设置这个对象的。
[Violation] Added non-passive event listener to a scroll-blocking ＜some＞ event. Consider marking eve
pia_ji的博客
03-30 3万+
Vue项目 Chrome 报警告如下图： [Violation] Added non-passive event listener to a scroll-blocking <some> event. Consider marking event handler as ‘passive’ to make the page more responsive. See <URL> 解决办法： 1.安装 default-passive-events npm i default-passi
浏览器告警提示:Added non-passive event listener to a scroll-blocking ‘touchstart‘ event. Consider markin...
古月水告的博客
01-24 5569
超烦有没有，触发一次事件它就提示一次，洁癖的我今天就告诉你们怎么处理掉这个问题。
vue报错【解决方案】 [Violation] Added non-passive event listener to a scroll-blocking ＜some＞ event.
yf18040578780的博客
12-29 2052
Chrome 警告问题
Vue 2.0 Element-UI el-select选择器显示问题及解决方案
在Vue 2.0版本的Element UI中，用户可能遇到一个问题，即在`el-select`选择器中，尽管选择了选项并且`change`方法被正确触发，但选中的内容并未在UI上显示。这个问题通常出现在如下的`select.vue`组件中： ```html ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值