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

最新推荐文章于 2024-08-20 12:36:38 发布
最新推荐文章于 2024-08-20 12:36:38 发布
阅读量352 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/youdu0213/article/details/119506611
版权
在Vue项目启动时遇到控制台警告，提示非被动事件监听器影响页面响应性。该警告涉及到'mousewheel'事件。解决方法包括安装npm包'default-passive-events'并将其引入到main.js文件中，以提高页面滚动性能。
摘要由CSDN通过智能技术生成

vue 项目启动控制台warning：

[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-events’
在这里插入图片描述

richful_world
关注
Passive Event Listeners - 被动事件监听器1
08-08
Passive Event Listeners - 被动事件监听器在写webapp页面的时候，Chrome 提醒　 [Violat
控制台： [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...
Added non-passive event listener to a scroll-blocking ＜some＞ event. Consider marking event handler a
最新发布
jieyucx的博客
08-20 1014
被动模式的事件监听器可以提升滚动性能，因为它们不会阻止浏览器在事件触发时进行默认的滚动行为。这个警告是因为在监听滚动事件时，没有指定事件处理程序为被动的(passive)，可能会导致页面滚动时出现性能问题。从源头讲在添加事件监听的地方，为事件处理程序加上一个对象，包含passive: true的属性，表示这个事件处理程序是被动的。这在某些情况下可能是必要的，例如需要阻止触摸事件的默认滚动行为。具体来说，它的作用是确保所有添加的事件监听器的 passive。是一个接口，所有可以接收事件的对象（如。
[Violation ] Added non-passive event listener to ascroll- blocking ‘mousewheel’event Consider markin
qq_65949679的博客
07-27 4087
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 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 'mousewheel' event. Consider marki
sinat_42888557的博客
12-20 1379
某度翻译 将非被动事件侦听器添加到滚动阻止“鼠标滚轮”事件。考虑将事件处理程序标记为“被动”以使页更具响应性 解决： https://blog.csdn.net/dj0379/article/details/52883315 Google公布了一个让页面滑动更流畅的新特性Passive Event Listeners 1、npm i default-passive-events -S 2、ma...
violation-comments-to-gitlab-plugin:注释GitLab将请求与静态代码分析器的发现合并
05-26
对GitLab插件的违规评论 这是一个针对的Jenkins插件。 这个插件可以从静态代码分析中找到报告文件，并对GitLab的请求请求进行评论。 可在詹金斯。 提供受支持报告的示例。 这里有一个完整的运行示例： : ...
violation-comments-to-bitbucket-server-command-line:向Bitbucket服务器报告静态代码分析
04-23
npx violation-comments-to-bitbucket-server-command-line \ -pat TOKENHERE \ -pk PROJECT_KEY \ -rs REPO_SLUT \ -prid 1234 \ -v " CHECKSTYLE " " . " " .*checkstyle/main\.xml$ " " Checkstyle " \ -v ...
violation-comments-to-bitbucket-cloud-command-line:向Bitbucket Cloud报告静态代码分析
04-05
npx violation-comments-to-bitbucket-cloud-command-line \ -u tomasbjerre \ -p MY-APPLICATION-PASSWORD \ -ws tomasbjerre \ -rs violations-test \ -prid 1 \ -v " CHECKSTYLE " " . " " .*checkstyle/...
hibernate-validator-5.0.0.CR2-dist.zip
08-25
= null && email.matches("\\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\.[A-Z|a-z]{2,}\\b"); } } ``` 在实际应用中，我们还可以使用`Validator`接口来执行验证，例如： ```java ValidatorFactory factory = ...
[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. ...
ElementUI校验[Violation] Added non-passive event listener to a scroll-blocking ‘touchmove‘ event. 问题解决
每天都要努力学习哦~~
10-27 3201
这段代码是一个自执行的函数，其主要目的是修改浏览器中的事件监听器（Event Listener）行为。，同时保留了原始的事件监听器方法，以不影响现有的代码逻辑。这就是为什么它保留了原始方法的原因，以确保事件监听器的行为不受太大影响。，浏览器会等待该函数执行完毕后再进行滚动，这可能导致滚动的延迟。最后，代码调用了原始的事件监听器方法，传递了相同的参数，包括修改后的。的形式，这意味着这段代码会在加载时立即执行，而不需要显式调用。是用于处理事件的基本对象，通常在现代浏览器中是定义的。然后，它设置这个对象的。
vue中警告[Violation] Added non-passive event listener to a scroll-blocking
m0_68716504的博客
07-21 980
Passive Event Listeners：就是告诉前页面内的事件监听器内部是否会调用preventDefault函数来阻止事件的默认行为，以便浏览器根据这个信息更好地做出决策来优化页面性能。当属性passive的值为true的时候，代表该监听器内部不会调用preventDefault函数来阻止默认滑动行为，Chrome浏览器称这类型的监听器为被动（passive）监听器。违反：没有添加被动事件监听器来阻止’touchstart’事件，请考虑添加事件管理者’passive’，以使页面更加流畅。
[Violation] Added non-passive event listener to a scroll-blocking ‘mousewheel‘ event VUE控制台警告
七月
07-30 2898
使用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 5936
vue中警告[Violation] Added non-passive event listener to a scroll-blocking event. Consider ma…在基于 Element-ui 写项目的时候，Chrome 提醒：
Added non-passive event listener to a scroll-blocking ‘mousewheel‘ event.
weixin_48648855的博客
06-10 8710
一直报这个警告 – 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 试了网上的方法，安装依
Vue项目警告:[Violation] Added non-passive event listener to a scroll-blocking ‘wheel‘ event
qq_42372534的博客
06-09 8426
vue项目警告:翻译default-passive-events 给支持passive选项的事件处理器添加passive:true,这是chrome的一个特性,当属性passive的值为true的时候，代表该监听器内部不会调用preventDefault函数来阻止默认滑动行为,提高页面滑动性能部分源码: 修改只给scroll,wheel事件添加passive:true...
[Violation] Added non-passive event listener to a scroll-blocking ‘mousewheel‘ event. Consider mark
Cheryl的加工厂
03-23 356
控制台提醒 [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-
[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
这个问题是关于网页的性能优化。当浏览器遇到一个阻塞滚动的事件处理程序时，它会发出这个警告。通常情况下，你可以通过将事件处理程序标记为"被动"（passive）来解决这个问题，以提高页面的响应能力。 被动事件处理程序是指不会调用 `preventDefault()` 方法的事件处理程序。通过这样做，浏览器可以更好地优化滚动性能，因为它知道事件处理程序不会阻止默认的滚动行为。 要解决这个问题，你可以修改事件处理程序的选项来将其标记为被动。具体的实现方式取决于你使用的 JavaScript 框架或库。在大多数情况下，你可以通过传递一个选项对象作为第三个参数来指定事件处理程序的选项，并将 `passive` 属性设置为 `true`。例如： ```javascript element.addEventListener('mousewheel', handler, { passive: true }); ``` 这样做后，浏览器就不会再发出这个警告了，并且页面的滚动性能也会得到提升。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值