vue项目non-passive event listener问题

解决Element-UI滚动阻塞警告

最新推荐文章于 2025-09-23 20:43:45 发布

原创最新推荐文章于 2025-09-23 20:43:45 发布 · 998 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#VUE

本文解决了在使用Element-UI时遇到的警告问题，该警告源于未添加被动事件监听器来处理'mousewheel'事件，导致页面响应性降低。通过安装default-passive-events包并在main.js中引入，可以有效提升页面流畅度。

解决的问题

使用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'事件，请考虑添加事件管理者'passive'，以使页面更加流畅。原因是 Chrome51 版本以后，Chrome 增加了新的事件捕获机制－Passive Event Listeners；

解决方法:
	1.使用cnpm(npm)下载依赖包
		cnpm(npm) install default-passive-events --save
	2.在入口文件main.js中引入
		import 'default-passive-events'
		保存，问题解决

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Making_Bug

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

ElementUI校验[Violation] Added non-passive event listener to a scroll-blocking ‘touchmove‘ event. 问题解决

每天都要努力学习哦~~

10-27

4607

这段代码是一个自执行的函数，其主要目的是修改浏览器中的事件监听器（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＞

参与评论您还未登录，请先登录后发表或查看评论

vue中警告[Violation] Added non-passive event listener to a scroll-blocking

m0_68716504的博客

07-21

1527

Passive Event Listeners：就是告诉前页面内的事件监听器内部是否会调用preventDefault函数来阻止事件的默认行为，以便浏览器根据这个信息更好地做出决策来优化页面性能。当属性passive的值为true的时候，代表该监听器内部不会调用preventDefault函数来阻止默认滑动行为，Chrome浏览器称这类型的监听器为被动（passive）监听器。违反：没有添加被动事件监听器来阻止’touchstart’事件，请考虑添加事件管理者’passive’，以使页面更加流畅。

vue3项目中报错:Added non-passive event listener to a scroll-blocking ‘wheel‘ event. Consider marking even

m0_50207524的博客

09-23

484

可以防止滚动事件之间的冲突，解决页面可能因为冲突出现的滚动卡顿问题，可以解决控制台报错。

项目警告Added non-passive event listener to a scroll-blocking ‘touchstart‘ event.

qq_59625204的博客

09-14

934

这个警告信息是由浏览器提供的，主要是为了提醒开发者关注性能问题。在移动设备上，'touchstart'事件可能会导致滚动操作的响应问题。当你在'touchstart'事件上添加了一个非被动的监听器（即监听器中有一些操作会影响默认行为，例如阻止滚动），浏览器可能会认为这是一个滚动阻止的行为，因此会发出这样的警告。如果你的事件处理器需要执行一些操作，但不影响滚动，可以考虑将事件监听器标记为被动的，使用。

浏览器告警提示:Added non-passive event listener to a scroll-blocking ‘touchstart‘ event. Consider markin...

古月水告的博客

01-24

6219

超烦有没有，触发一次事件它就提示一次，洁癖的我今天就告诉你们怎么处理掉这个问题。

【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 ＜some＞ event. Consider marking eve

疑问搜索动手解决记录

03-18

6598

Vue项目 F12 Chrome 报警告如下图： [Violation] Added non-passive event listener to a scroll-blocking event. Consider marking event handler as ‘passive’ to make the page more responsive. See 解决办法：一 : 1.安装 default-passive-events npm i default-passive-events -S -D

Added non-passive event listener

热门推荐

qq_71214810的博客

12-23

1万+

触摸事件（touchmove）默认将具有滚动阻塞的特性，将非被动设置为被动（passive），以实现更流畅的滚动效果。，使页面更加具有响应性。

Added non-passive event listener to a scroll-blocking ‘touchstart‘ event. Consider marking event...

yjl13598765406的博客

06-28

1万+

vue项目在chrome版本下验证触发的警告

Added non-passive event listener to a scroll-blocking ‘touchstart‘ event. 警告解决记录

m0_58031031的博客

03-10

936

default-passive-events插件。然后在项目的main.js引入。

[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 译文： [违规]

谷歌浏览器警告：Added non-passive event listener to a scroll-blocking ‘wheel‘ event

我是小妖yun的博客

08-25

2533

谷歌浏览器警告： [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

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

vip.khan的博客

02-24

1962

在基于 Element-ui 写项目的时候，Chrome 提醒： [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Conside 翻译过来如下：违反：没有添加被动事件监听器来阻止'touchstart'事件，请考虑添加事件管理者'passive'，以使页面更加流畅。原因是 Chrome51 版本以后，Chrome 增加了新的事件捕获机制－Passive Event Liste