[Violation] Added non-passive event listener to a scroll-blocking ＜某些＞ ...

最新推荐文章于 2024-06-06 17:20:03 发布
最新推荐文章于 2024-06-06 17:20:03 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： vue.js Element-UI 文章标签： 前端 chrome
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45586038/article/details/127801289
版权

1、问题：

Chrome51 版本以后，Chrome 增加了新的事件捕获机制－Passive Event Listeners，导致触发了告警。 使用Element Plus中的TimePicker组件时，只要触发了touchu事件，控制台就会报警告。

2、解决方案

    引入插件

yarn add default-passive-events --dev

     在main.js 中引入

import 'default-passive-events';  //去除touchstart谷歌提示
牵只蜗牛去跑步
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Passive Event Listeners - 被动事件监听器1
08-08
被动事件监听器（Passive Event Listeners）是现代Web开发中的一个重要优化策略，尤其是在构建高性能的Web应用程序时。这个概念的引入主要是为了提高页面的滚动性能和响应速度，特别是对于移动设备上的触摸事件。...
violation-comments-to-gitlab-plugin:注释GitLab将请求与静态代码分析器的发现合并
05-26
对GitLab插件的违规评论 这是一个针对的Jenkins插件。 这个插件可以从静态代码分析中找到报告文件，并对GitLab的请求请求进行评论。 可在詹金斯。 提供受支持报告的示例。 这里有一个完整的运行示例： : ...
【无标题】
madmodo的博客
04-07 602
安装完成后，确实是不再警告了。当应用中用到滚动事件scroll、滚轮事件wheel或者移动端touchstart/touchmove/touchend等事件时会报这样的警告，通过排查我的项目中是在使用了：TimePicker 时间选择器组件、DatePicker 日期选择器组件和Input Number 数字输入框等组件时会报这样的错误。另外，据说使用echart时，也会报同样的错误，虽然这个错误包括上面的警告信息都不影响页面的正常使用，但是一个不断报错报警告的应用总是会让人产生一些不踏实的感觉。
浏览器告警提示:Added non-passive event listener to a scroll-blocking ‘touchstart‘ event. Consider markin...
古月水告的博客
01-24 5376
超烦有没有，触发一次事件它就提示一次，洁癖的我今天就告诉你们怎么处理掉这个问题。
[Violation] Added non-passive event listener to a scroll-blocking ‘touchstart‘ event. Consider marki
最新发布
qubes的专栏
06-06 551
这个警告通常出现在浏览器的开发者工具控制台中，是由于添加了非被动（non-passive）的事件监听器导致的。问题出在eruda这个工具 在tuchstart事件中使用了非被动事件监听器。什么是非被动（non-passive）事件监听器和被动事件监听器？非被动（non-passive）事件监听器。
[Violation] Added non-passive event listener to a scroll-blocking ＜some＞ event. Consider marking eve
黎小小的博客
11-23 847
浏览器页面警告：[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。
Chrome控制台异常日志：Added non-passive event listener to a scroll-blocking ‘touchstart‘ event
q1003675852的博客
12-01 963
Passive Event Listeners：就是告诉前页面内的事件监听器内部是否会调用preventDefault函数来阻止事件的默认行为，以便浏览器根据这个信息更好地做出决策来优化页面性能。当属性passive的值为true的时候，代表该监听器内部不会调用preventDefault函数来阻止默认滑动行为，Chrome浏览器称这类型的监听器为被动（passive）监听器。原因是 Chrome51 版本以后，Chrome 增加了新的事件捕获机制－Passive Event Listeners；
vue项目non-passive event listener问题
qq_40352933的博客
12-22 1171
vue项目non-passive event listener问题使用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'事件，请考虑添加事件管理者
CCNA-command.zip_site:www.pudn.com
09-23
7. **端口安全**：`switchport port-security`开启端口安全，`switchport port-security violation action`定义当检测到违反安全规则时采取的动作，如shutdown或restrict。 8. **ping和traceroute**：这两个诊断...
hibernate-validator-5.0.0.CR2-dist.zip
08-25
for (ConstraintViolation<User> violation : violations) { System.out.println(violation.getMessage()); } ``` 在`my--hibernate-validator`这个子目录中，可能包含了示例、文档或其他相关资源，这些可以帮助...
Tesseract-OCR.rar
05-04
tesseract-x.xx.<lang>.tar.gz unpacks to the tessdata directory which belongs inside your tesseract-ocr directory. It is therefore best to download them into your tesseract-x.xx directory, so you can...
谷歌浏览器警告：Added non-passive event listener to a scroll-blocking ‘wheel‘ event
我是小妖yun的博客
08-25 2281
谷歌浏览器警告： [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
vue中警告[Violation] Added non-passive event listener to a scroll-blocking
weixin_43267006的博客
05-15 7199
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. Consider marking event handler as ‘passive’
Added non-passive event listener to a scroll-blocking ‘touchstart‘ event. 警告解决记录
m0_58031031的博客
03-10 664
default-passive-events插件。然后在项目的main.js引入。
谷歌浏览器关于滚动事件警告去除
weixin_49295874的博客
02-16 1856
将非被动事件侦听器添加到滚动阻止“鼠标滚轮”事件。考虑将事件处理程序标记为“被动”以使页更具响应性。2、main.js中加入：import ‘default-passive-events’
[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marki
sinat_42888557的博客
12-20 1320
某度翻译 将非被动事件侦听器添加到滚动阻止“鼠标滚轮”事件。考虑将事件处理程序标记为“被动”以使页更具响应性 解决： https://blog.csdn.net/dj0379/article/details/52883315 Google公布了一个让页面滑动更流畅的新特性Passive Event Listeners 1、npm i default-passive-events -S 2、ma...
element plus (vue3) 中 el-input 与 el-time-picker的focus聚焦事件
butebeizhanghao的博客
04-26 1127
element plus (vue3) 中 el-input 与 el-time-picker的focus聚焦事件。
Added non-passive event listener to a scroll-blocking ‘touchmove‘ event解决方案
qq_71214810的博客
12-23 5103
触摸事件（touchmove）默认将具有滚动阻塞的特性，将非被动设置为被动（passive），以实现更流畅的滚动效果。，使页面更加具有响应性。
[Violation] Added non-passive event listener to a scroll-blocking <some> event. Consider marking event handler as 'passive' to make the page more responsive
05-25
这个错误是浏览器的警告信息，它通常出现在添加了滚动阻塞事件的非被动监听器的情况下。这意味着页面的滚动会被阻塞，影响用户的体验。 要解决这个问题，可以将事件处理程序标记为“被动”的。被动事件监听器是一种特殊类型的事件监听器，它告诉浏览器该事件处理程序不会调用 event.preventDefault() 方法，从而使浏览器能够更好地优化性能。 在 JavaScript 中，你可以通过添加 `{ passive: true }` 选项来将事件处理程序标记为被动监听器，例如： ```javascript element.addEventListener('scroll', handleScroll, { passive: true }); ``` 这将告诉浏览器该事件处理程序是被动的，从而避免了上述警告信息的出现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值