[Violation] Added non-passive event listener to a scroll-blocking ‘mousewheel‘ event.

最新推荐文章于 2025-09-23 20:43:45 发布
原创 最新推荐文章于 2025-09-23 20:43:45 发布 · 1.9k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

在使用Element-ui开发项目时遇到Chrome浏览器警告，提示未使用被动事件监听器处理'mousewheel'事件，这可能影响页面滚动性能。解决方案是在项目中引入'default-passive-events'库，通过在main.js中导入该库来优化事件监听，以提升页面滚动流畅性。

在基于 Element-ui 写项目的时候，Chrome 提醒：

[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Conside

翻译过来如下：
违反：没有添加被动事件监听器来阻止'touchstart'事件，请考虑添加事件管理者'passive'，以使页面更加流畅。

原因是 Chrome51 版本以后，Chrome 增加了新的事件捕获机制－Passive Event Listeners；

解决：

1、npm i default-passive-events -S

2、main.js中加入：import 'default-passive-events'

 

ElementUI校验[Violation] Added non-passive event listener to a scroll-blocking ‘touchmove‘ event. 问题解决
每天都要努力学习哦~~
10-27 4609
这段代码是一个自执行的函数，其主要目的是修改浏览器中的事件监听器（Event Listener）行为。，同时保留了原始的事件监听器方法，以不影响现有的代码逻辑。这就是为什么它保留了原始方法的原因，以确保事件监听器的行为不受太大影响。，浏览器会等待该函数执行完毕后再进行滚动，这可能导致滚动的延迟。最后，代码调用了原始的事件监听器方法，传递了相同的参数，包括修改后的。的形式，这意味着这段代码会在加载时立即执行，而不需要显式调用。是用于处理事件的基本对象，通常在现代浏览器中是定义的。然后，它设置这个对象的。
[Violation] Added non-passive event listener to a scroll-blocking...
前端必备小窝
12-12 1318
[Violation] Added non-passive event listener to a scroll-blocking 事件. Consider marking event handler as 'passive' to make the page more responsive. See 译: [违规]向滚动阻止添加了非被动事件侦听器 事件. 请考虑将事件处理程序标记为“被动”，以提高页面的响应能力。请参阅＜URL＞
控制台： [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event
weixin_34403976的博客
11-04 1万+
谷歌控制台 提示： [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive 翻译 违反：没有添加被动事件监听器来阻止’touchs...
vue3项目中报错:Added non-passive event listener to a scroll-blocking ‘wheel‘ event. Consider marking even
最新发布
m0_50207524的博客
09-23 484
可以防止滚动事件之间的冲突，解决页面可能因为冲突出现的滚动卡顿问题，可以解决控制台报错。
[Violation ] Added non-passive event listener to ascroll- blocking ‘mousewheel’event Consider markin
qq_65949679的博客
07-27 4439
Violation ] Added non-passive event listener to ascroll- blocking 'mousewheel’event Consider marking event handler as ’ passive’to make the page more responsive. --控制台报错解决方法。
Added non-passive event listener to a scroll-blocking ‘mousewheel‘ event.
weixin_48648855的博客
06-10 9191
一直报这个警告 – event.js:106 [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 试了网上的方法，安装依
[Violation] Added non-passive event listener to a scroll-blocking ‘mousewheel’ event 解决方案
主要领域：前端开发
06-24 1133
yarn add default-passive-events main.js import 'default-passive-events';
[Violation] Added non-passive event listener to a scroll-blocking ‘mousewheel‘ event. Consider mark
Cheryl的加工厂
03-23 475
控制台提醒 [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive. 解决方法： 1.终端输入 npm i default-passive-events -S 2.main.js中加入： import 'default-passive-
【Vue3】解决element ui plus “Added non-passive event listener to a scroll-blocking ‘mousewheel‘ event.”
woodwhale的博客
04-06 2760
【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 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
07-22
但如果确实需要阻止默认行为，则不能使用 `passive` 模式，否则会触发类似 `Unable to preventDefault inside passive event listener invocation` 的错误[^4]。 ### 使用第三方库自动处理 对于某些框架或库（例如...
[Violation]Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive
07-15
这个问题是关于网页的性能优化。当浏览器遇到一个阻塞滚动...element.addEventListener('mousewheel', handler, { passive: true }); ``` 这样做后，浏览器就不会再发出这个警告了，并且页面的滚动性能也会得到提升。
[Violation] Added non-passive event listener to a scroll-blocking ‘mousewheel‘ event VUE控制台警告
七月
07-30 3310
使用vue elementUI 时 控制台警告： [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 译文： [违规]
【VUE】[Violation] Added non-passive event listener to a scroll-blocking...
无限循环
08-10 6220
vue中警告[Violation] Added non-passive event listener to a scroll-blocking event. Consider ma…在基于 Element-ui 写项目的时候，Chrome 提醒：
[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. ...
[Violation] Added non-passive event listener to a scroll-blocking ‘mousewheel‘ event. Consider marki
weixin_47181907的博客
06-15 3089
警告信息如下：[Violation] Added non-passive event listener to a scroll-blocking ‘mousewheel’ event. Consider marking event handler as ‘passive’ to make the page more responsive. 解决办法：1、直接在项目终端下载安装npm install default-passive-events 2、在main.js中引入就可以了import "defaul
Added non-passive event listener to ascroll- blocking ‘mousewheel‘event Consider marking event handl
qq_42264793的博客
11-20 1万+
[Violation ] Added non-passive event listener to ascroll- blocking 'mousewheel’event Consider marking event handler as ’ passive’to make the page more responsive. See https: com/feature/574554 3795965952 翻译： [冲突]在ascroll中添加了非被动事件侦听器-阻塞“mousewheel”事件考虑将事件处理
[Violation] Added non-passive event listener to a scroll-blocking ＜some＞ event. Consider marking eve
黎小小的博客
11-23 2896
浏览器页面警告：[Violation] Added non-passive event listener to a scroll-blocking event. Consider marking event handler as 'passive' to make the page more responsive. See Chrome51 版本更新以后，增加了新的事件捕获机制－Passive Event Listeners。下载default-passive-events。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

vip.khan

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值