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

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

#vue.js

本文介绍了解决Vue项目中控制台出现的'Violation'警告的方法，通过安装default-passive-events包并在main.js中引入，可以避免因'touchmove'事件监听导致的滚动阻塞问题。

vue 控制台提示

[Violation] Added non-passive event listener to a scroll-blocking ‘touchmove’ event.
在这里插入图片描述

解决：

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 4623
这段代码是一个自执行的函数，其主要目的是修改浏览器中的事件监听器（Event Listener）行为。，同时保留了原始的事件监听器方法，以不影响现有的代码逻辑。这就是为什么它保留了原始方法的原因，以确保事件监听器的行为不受太大影响。，浏览器会等待该函数执行完毕后再进行滚动，这可能导致滚动的延迟。最后，代码调用了原始的事件监听器方法，传递了相同的参数，包括修改后的。的形式，这意味着这段代码会在加载时立即执行，而不需要显式调用。是用于处理事件的基本对象，通常在现代浏览器中是定义的。然后，它设置这个对象的。
[Violation] Added non-passive event listener to a scroll-blocking ＜some＞ event. Consider marking eve
疑问 搜索 动手 解决 记录
03-18 6601
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
vue3项目中报错:Added non-passive event listener to a scroll-blocking ‘wheel‘ event. Consider marking even
m0_50207524的博客
09-23 505
可以防止滚动事件之间的冲突，解决页面可能因为冲突出现的滚动卡顿问题，可以解决控制台报错。
addeventlistener监听scroll跟touch(实例讲解)
12-04
这三个事件只在手机上生效 touchstart：手指开始触屏 touchmove：手指移动 touchend：手指触屏结束 这个事件在手机上跟在pc端都生效 scroll事件 addeventlistener(name,callback,optional,useCapture) useCapture：事件是否用捕获事件，从外到里，true                         默认为false:使用冒泡事件，从里到外 optional:{      passive:false时，阻止默认事件，ture时不阻止默认事件(默认值是false) } passive:true可以防止
Added non-passive event listener to a scroll-blocking ‘touchmove‘ event解决方案
qq_71214810的博客
12-23 1万+
触摸事件（touchmove）默认将具有滚动阻塞的特性，将非被动设置为被动（passive），以实现更流畅的滚动效果。，使页面更加具有响应性。
Added non-passive event listener to a scroll-blocking ‘touchmove‘ event....
tonetwo的博客
03-07 4732
关于Chrome浏览器 Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive警告的解决办法
Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive.
07-31
当开发者为这些事件添加非被动（non-passive）监听器时，浏览器会发出类似 `[Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event` 的警告[^3]。 这一警告的出现通常意味着事件...
[Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive.
09-09
要解决添加非被动事件监听器到滚动阻塞的 `touchmove` 事件问题，提高页面响应性，可以采用以下几种方法： ### 使用被动事件监听器 现代浏览器为了优化滚动性能，引入了被动事件监听器的概念。通过将 `touchmove` ...
10[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>
10-31
[Violation] Added non-passive event listener to a scroll-blocking 'some' event. Consider marking event handler as 'passive' to make the page more responsive. ``` ⚠️ **这不是错误（Error），而是一个...
popup-manager.js:27 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
最新发布
11-07
[Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. ``` 是浏览器（特别是 Chrome）发出的 ...
Added non-passive event listener to a scroll-blocking ‘touchmove’ event
AmoLinoo的博客
07-21 816
代码】Addednon-passiveeventlistenertoascroll-blocking‘touchmove’event。
Vue控制台警告： Added non-passive event listener to a scroll-blocking ‘touchmove‘ event. Consider markin
weixin_45847765的博客
07-27 8680
PassiveEventListeners就是告诉前页面内的事件监听器内部是否会调用preventDefault函数来阻止事件的默认行为，以便浏览器根据这个信息更好地做出决策来优化页面性能。当属性passive的值为true的时候，代表该监听器内部不会调用preventDefault函数来阻止默认滑动行为，Chrome浏览器称这类型的监听器为被动（passive）监听器。违反没有添加被动事件监听器来阻止'touchstart'事件，请考虑添加事件管理者'passive'，以使页面更加流畅。...
[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 ‘touchmove event
qq_66898976的博客
08-24 269
谷歌浏览器报错[Violation] Added non-passive event listener to a scroll-blocking ‘touchmove‘ event。在main.js中引入import 'default-passive-events'使用npm install -S default-passive-events ，
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. Consider markin...
古月水告的博客
01-24 6228
超烦有没有，触发一次事件它就提示一次，洁癖的我今天就告诉你们怎么处理掉这个问题。
[Violation] Added non-passive event listener to a scroll-blocking ‘touchstart‘ event. Consider marki
qubes的专栏
06-06 1768
这个警告通常出现在浏览器的开发者工具控制台中，是由于添加了非被动（non-passive）的事件监听器导致的。问题出在eruda这个工具 在tuchstart事件中使用了非被动事件监听器。什么是非被动（non-passive）事件监听器和被动事件监听器？非被动（non-passive）事件监听器。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值