vue项目non-passive event listener问题

最新推荐文章于 2025-02-06 01:24:44 发布

Making_Bug

最新推荐文章于 2025-02-06 01:24:44 发布

阅读量974

点赞数

CC 4.0 BY-SA版权

文章标签： VUE

本文链接：https://blog.youkuaiyun.com/Making_Bug/article/details/97629926

解决的问题

使用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

4380

这段代码是一个自执行的函数，其主要目的是修改浏览器中的事件监听器（Event Listener）行为。，同时保留了原始的事件监听器方法，以不影响现有的代码逻辑。这就是为什么它保留了原始方法的原因，以确保事件监听器的行为不受太大影响。，浏览器会等待该函数执行完毕后再进行滚动，这可能导致滚动的延迟。最后，代码调用了原始的事件监听器方法，传递了相同的参数，包括修改后的。的形式，这意味着这段代码会在加载时立即执行，而不需要显式调用。是用于处理事件的基本对象，通常在现代浏览器中是定义的。然后，它设置这个对象的。

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

qq_36350600的博客

09-16

3111

vue element chrome 警告信息non-passive event listener解决前言解决方法方法一(安装default-passive-events)方法二(修改element-plus源代码)参考链接前言用element-plus搞项目的时候一直报下面这个警告, 主要是在用<el-table></el-table>的地方想要知道关于警告详情的,可以参考博文下发的参考链接,我就不多赘述了 [Violation] Added non-passive eve

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

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

m0_68716504的博客

07-21

1411

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

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

古月水告的博客

01-24

6075

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

Vue控制台警告： Added non-passive event listener to a scroll-blocking ‘touchmove‘ event. Consider markin

weixin_45847765的博客

07-27

8599

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

[Violation] Added non-passive event listener to a scroll-blocking ‘touchstart‘ event. Consider marki

qq_39196447的博客

01-30

1097

【代码】[Violation] Added non-passive event listener to a scroll-blocking ‘touchstart‘ event. Consider marki。

【Vue3】解决element ui plus “Added non-passive event listener to a scroll-blocking ‘mousewheel‘ event.”

woodwhale的博客

04-06

2663

【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

Added non-passive event listener to a scroll-blocking ＜some＞ event. Consider marking event handler a

jieyucx的博客

08-20

3539

被动模式的事件监听器可以提升滚动性能，因为它们不会阻止浏览器在事件触发时进行默认的滚动行为。这个警告是因为在监听滚动事件时，没有指定事件处理程序为被动的(passive)，可能会导致页面滚动时出现性能问题。从源头讲在添加事件监听的地方，为事件处理程序加上一个对象，包含passive: true的属性，表示这个事件处理程序是被动的。这在某些情况下可能是必要的，例如需要阻止触摸事件的默认滚动行为。具体来说，它的作用是确保所有添加的事件监听器的 passive。是一个接口，所有可以接收事件的对象（如。

vue3 Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.

03-09

### 解决 Vue3 中非被动事件监听器导致的页面响应性问题在现代 Web 开发中，为了提高滚动操作的性能和响应速度，浏览器引入了被动事件监听器的概念。当处理 `touchstart` 或 `mousewheel` 等可能导致阻塞滚动的...

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

yjl13598765406的博客

06-28

1万+

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

[Violation] Added non-passive event listener to a scroll-blocking ‘mousewheel‘ event VUE控制台警告

七月

07-30

3240

使用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 ＜some＞ event.

yf18040578780的博客

12-29

2446

Chrome 警告问题

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

Minyoung 的博客

03-02

1401

1.npm i default-passive-events -S 2.main.js引入入：import ‘default-passive-events’

控制台： [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event

最新发布

06-05

### 解决 Vue 2 中的 Passive Event Listener 警告问题在 Vue 2 项目中，当使用 `addEventListener` 添加滚动阻塞事件（如 `touchstart` 或 `touchmove`）时，可能会遇到 `[Violation] Added non-passive event listener` 的警告。这种警告源于浏览器为了优化滚动性能而引入的被动事件监听器机制。以下是对该问题的专业解决方案： #### 1. 理解被动事件监听器现代浏览器默认将某些滚动相关的事件（如 `touchstart` 和 `touchmove`）视为被动事件。这意味着这些事件不会调用 `event.preventDefault()`，以确保页面滚动更加流畅[^3]。如果开发者未明确指定事件为被动，则会触发上述警告。 #### 2. 使用 `{ passive: true }` 选项通过将事件监听器的选项设置为 `{ passive: true }`，可以避免此警告。例如： ```javascript element.addEventListener('touchstart', handleTouchStart, { passive: true }); element.addEventListener('touchmove', handleTouchMove, { passive: true }); ``` 如果需要在事件处理函数中调用 `event.preventDefault()`，则不能使用 `{ passive: true }`，因为被动事件不允许阻止默认行为。此时，必须权衡性能与功能需求[^4]。 #### 3. 全局解决方法如果项目中存在多个地方需要添加类似的事件监听器，可以通过封装一个通用方法来统一处理： ```javascript function addPassiveEventListener(element, eventName, handler) { element.addEventListener(eventName, handler, { passive: true }); } // 使用示例 addPassiveEventListener(document.querySelector('.scrollable'), 'touchmove', handleTouchMove); ``` #### 4. 使用第三方库对于复杂的项目，可以考虑使用第三方库 `default-passive-events` 来自动处理被动事件监听器的问题。该库会自动将所有事件监听器设置为被动模式，除非明确需要阻止默认行为[^3]。安装并使用该库的示例如下： ```bash npm install default-passive-events ``` ```javascript import 'default-passive-events'; document.querySelector('.scrollable').addEventListener('touchmove', handleTouchMove); ``` #### 5. Vue 2 中的具体实现在 Vue 2 中，可以在组件的生命周期钩子（如 `mounted`）中添加事件监听器，并确保使用正确的选项： ```javascript export default { mounted() { const element = this.$refs.scrollable; element.addEventListener('touchstart', this.handleTouchStart, { passive: true }); element.addEventListener('touchmove', this.handleTouchMove, { passive: true }); }, beforeDestroy() { const element = this.$refs.scrollable; element.removeEventListener('touchstart', this.handleTouchStart, { passive: true }); element.removeEventListener('touchmove', this.handleTouchMove, { passive: true }); }, methods: { handleTouchStart(event) { console.log('Touch start detected'); }, handleTouchMove(event) { console.log('Touch move detected'); } } }; ``` #### 6. 注意事项 - 如果事件处理函数确实需要调用 `event.preventDefault()`，则不能使用 `{ passive: true }`。此时应评估是否可以通过其他方式实现相同功能，以避免影响滚动性能。 - 在移除事件监听器时，必须使用与添加时相同的选项对象，否则会导致移除失败[^4]。 --- ###