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

已于 2024-01-30 14:51:46 修改
阅读量799 收藏 8
点赞数 11
文章标签： 前端框架 javascript vue.js
于 2024-01-30 14:25:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39196447/article/details/135932196
版权

解决谷歌浏览器警告
在这里插入图片描述

vue3项目中使用Element-Plus的表单form校验单的时候，浏览器出现以下警告：

[Violation] Added non-passive event listener to a scroll-blocking
‘touchmove’ event. Consider marking event handler as ‘passive’ to make the page more responsive.

安装插件

npm install default-passive-events -S

在main.ts引入

//添加事件管理者'passive'，来阻止'touchstart'事件，让页面更加流畅。 解决chrome下的warning问题
import 'default-passive-events'
qq_39196447
关注
  • 11
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
谷歌浏览器关于Added non-passive event listener to a scroll-blocking...的错误处理
guizi0809的博客
08-23 6227
解决谷歌浏览器“Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.”警告
default-passive-events:使{被动
05-02
default-passive-events 当支持EventListenerOptions时，默认使{passive：true} 50行代码段，默认情况下启用某些事件的（）。 基本上，每次您声明新的时，它都会自动设置{Passive：true} 。 安装 yarn add default-passive-events 用法 只需提供包装： require ( 'default-passive-events' ) ; 或将其包含在本地： < script type =" text/javascript " src =" node_modules/default-passive-events/dist/index.js " > </ script > 或来自 ： < script type =" text/javascript " src =" https://unpkg.c
控制台： [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 ‘touchstart‘ event. 警告解决记录
m0_58031031的博客
03-10 444
default-passive-events插件。然后在项目的main.js引入。
violation-comments-to-bitbucket-server-command-line:向Bitbucket服务器报告静态代码分析
04-23
对Bitbucket服务器命令行的违规注释 向Bitbucket Server报告静态代码分析。 它使用 。 可以在找到可运行的对象。 使用以下命令运行它： 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 " JSHINT " " . " " .*jshint/report\.xml$ " " JSHint " 您必须在build之前执行合并。 如果不执行合并，则报告的违规将引用其他行，然后是pull请求中的行。 可以使用这样的she
Passive Event Listeners - 被动事件监听器1
08-08
Passive Event Listeners - 被动事件监听器在写webapp页面的时候，Chrome 提醒　 [Violat
Added non-passive event listener to a scroll-blocking ‘touchstart‘ event. Consider marking event han
weixin_48975022的博客
07-27 2202
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 5184
超烦有没有，触发一次事件它就提示一次，洁癖的我今天就告诉你们怎么处理掉这个问题。
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 marking event 】
regretTAT的博客
08-24 557
组件外边再包一层div即可。
Chrome控制台异常日志：Added non-passive event listener to a scroll-blocking ‘touchstart‘ event
q1003675852的博客
12-01 713
Passive Event Listeners：就是告诉前页面内的事件监听器内部是否会调用preventDefault函数来阻止事件的默认行为，以便浏览器根据这个信息更好地做出决策来优化页面性能。当属性passive的值为true的时候，代表该监听器内部不会调用preventDefault函数来阻止默认滑动行为，Chrome浏览器称这类型的监听器为被动（passive）监听器。原因是 Chrome51 版本以后，Chrome 增加了新的事件捕获机制－Passive Event Listeners；
Efficient generation of non-classical photon pairs in a hot atomic ensemble
01-27
We demonstrate the generation of non-classical photon pairs in a warm Rb87 atomic vapor cell with no buffer gas or polarization preserving coatings via spontaneous four-wave mixing. We obtain the photon pairs with a 1/e correlation time of 40 ns and the violation of Cauchy–Schwartz inequality by a factor of 23±3. This provides a convenient and efficient method to generate photon pair sources based on an atomic ensemble.
violation-comments-to-gitlab-plugin:注释GitLab将请求与静态代码分析器的发现合并
05-26
对GitLab插件的违规评论 这是一个针对的Jenkins插件。 这个插件可以从静态代码分析中找到报告文件，并对GitLab的请求请求进行评论。 可在詹金斯。 提供受支持报告的示例。 这里有一个完整的运行示例： : 您也可以使用执行此操作。 已经实现了许多解析器。 一些解析器可以解析多个报告器的输出。 记者 解析器 笔记 CLANG ANDROIDLINT FLAKE8 与-p CLANG 使用bandit -r examples/ -f custom -o bandit.out --msg-template "{abspath}:{line}: {severity}: {test_id}: {msg}" CLANG CPD CPPCHECK 使用cppcheck test.cpp --output-file=cppcheck.xml --xml CPPLINT
violation-comments-to-bitbucket-cloud-command-line:向Bitbucket Cloud报告静态代码分析
04-05
对Bitbucket Cloud命令行的违规评论 向Bitbucket Cloud报告静态代码分析。 它使用 。 可以在找到可运行的对象。 使用以下命令运行它： npx violation-comments-to-bitbucket-cloud-command-line \ -u tomasbjerre \ -p MY-APPLICATION-PASSWORD \ -ws tomasbjerre \ -rs violations-test \ -prid 1 \ -v " CHECKSTYLE " " . " " .*checkstyle/main\.xml$ " " Checkstyle " \ -v " JSHINT " " . " " .*jshint/report\.xml$ " " JSHint " 创建这样的应用程序密码： : 如果从Jenkins
前端框架技术调研
程序研博客
04-22 1812
目前程序员使用前端框架最多的是哪一个？
web前端框架设计第七课-事件处理
专科三年的修炼的博客
04-24 547
行动是治愈恐惧的良药，犹豫拖延将不断滋养恐惧。
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 639
步骤很详细，直接上教程……
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 735
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
bpmn-js推荐几款常用的插件
最新发布
飞云先生
04-30 24
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
[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、付费专栏及课程。

余额充值