vue 解决chrome下的passive警告问题

最新推荐文章于 2024-05-08 09:33:09 发布
最新推荐文章于 2024-05-08 09:33:09 发布
阅读量837 收藏 2
点赞数 5
文章标签： vue.js chrome 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44382108/article/details/136757142
版权

类似问题

安装 default-passive-events

（1）npm i default-passive-events -S

main.js中加入：import ‘default-passive-events’
import “default-passive-events”; //添加事件管理者’passive’，来阻止’touchstart’事件，让页面更加流畅。 解决chrome下的warning问题

修改只给scroll,wheel事件添加passive:true

源码修改位置

菜鸟辉辉
关注
  • 5
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue项目开发常见问题和解决方案总结
10-14
主要介绍了Vue项目开发常见问题和解决方案总结，帮助大家更好的利用vue开发，感兴趣的朋友可以了解下
vue中，解决chrome下，的warning, Added non-passive event listener to a scroll-blocking ‘mousewheel‘ event 问题
ddx2019的博客
10-10 1万+
一、警告信息如下： vue+element项目中，解决chrome下的passive警告问题 element-ui.common.js?5c96:9972 [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://ww
优化滚动性能：default-passive-events 开源库解析与应用
最新发布
gitblog_00002的博客
05-08 646
优化滚动性能：default-passive-events 开源库解析与应用 项目地址:https://gitcode.com/zzarcon/default-passive-events 1、项目介绍 default-passive-events 是一个轻量级的JavaScript库，它通过自动为支持EventListenerOptions的浏览器设置事件监听器的{passive: true}选...
谷歌浏览器关于滚动事件警告去除
weixin_49295874的博客
02-16 1854
将非被动事件侦听器添加到滚动阻止“鼠标滚轮”事件。考虑将事件处理程序标记为“被动”以使页更具响应性。2、main.js中加入：import ‘default-passive-events’
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
default-passive-events导致出现解决滚动背景的问题
热门推荐
许洪源的博客
03-22 1万+
问题描述 我的项目对接的地图每次鼠标点击、移入移出都会报 Unable to preventDefault inside passive event listener invocation. 用的绘图工具是js的konva 2D库 创建的地图 。 鼠标每次移入此地图画布 ，或者点击画布的时候都会出现该问题。虽然不影响操作，但是对于咱们开发人员来讲却是一个非常头疼的问题，稍有不慎，鼠标经过这个画布都是几十上百条同样的报错，不管是对客户，对公司还是对自己来讲都是一个非常不好的体验。 原因由于 Chrome
5月前端开发日记整理
接着奏乐接着舞的博客
05-25 3284
1.阻止鼠标右键事件 2.bug： 表单编辑时输入无效 3.显示/隐藏密码功能+小眼睛效果 4.当表单必填项没填时提交按钮不可点击且置灰 5.屡试不爽的神技-刷新页面 6.ElementUI表单验证注意事项 7.ElementUI最大输入和最小输入及清空图标 8.数组累计问题
阅读项目代码笔记
坚强的泡沫的博客
02-03 378
1、import ，export，export default的区别 import： import用于在一个模块中加载另一个含有export接口的模块。 export： export用于对外输出本模块（一个文件可以理解为一个模块）变量的接口。 export default： 与export有相同的目的。 export和export default的异同： export与export default均可用于导出常量、函数、文件、模块等，并通过import+(常量 | 函数 | 文件 | 模块)名
vue-chrome-extension-template：vue chrome扩展模板
01-30
Vue.js Chrome扩展模板（ ） 开发时可在Vuejs上快速重新加载Chrome扩展的模板。 安装： 该样板是作为的模板构建的，并包含用于自定义最终脚手架应用程序的选项。 # install vue-cli $ npm install -g vue-cli # ...
chrome插件 vue-devtools离线安装包
04-27
Chrome插件Vue DevTools是Vue.js开发过程中不可或缺的工具，它为开发者提供了一套强大的调试功能，如实时查看组件状态、检测性能、修改数据等。 Vue Devtools 5.3.3 版本是该插件的一个稳定版本，可以从GitHub上...
VUE跨域chrome控件和vue开发组件
03-14
在这个主题中，“VUE跨域chrome控件和vue开发组件”涉及到两个主要概念：Vue.js的跨域解决方案以及在Chrome浏览器中使用特定的控件来辅助开发Vue组件。 首先，我们来谈谈Vue.js的跨域问题。在Web应用开发中，由于...
使用Vue开发chrome插件
08-09
4. **集成到Chrome插件**：将Vue编译后的文件（通常是dist目录下的文件）复制到Chrome插件目录，然后通过开发者模式加载插件进行测试。 5. **调试与优化**：利用Chrome的开发者工具进行调试，优化性能和用户体验。 ...
谷歌浏览器事件坑：Unable to preventDefault inside passive event listener invocation.
古月水告的博客
03-24 687
从 chrome56 开始，在 window、document 和 body 上注册的 touchstart 和 touchmove 事件处理函数，会默认为是 passive: true。插件是解决浏览器告警的，我不想浏览器有告警信息，但加上又使浏览器报错，怎么处呢？，它默认情况下启用某些事件的被动事件侦听器，基本上每次声明新的事件监听器时，都会自动设置。插件导致的，注释了在main.js引入的就没有报错了。1、注册处理函数时，用如下方式，明确声明为不是被动的。，图一时畅快，现在出现问题了。
清空表单时出现问题
Start2019
09-18 720
打开页面时报警告： 解决办法： （1）npm i default-passive-events -S （2）main.js中加入：import ‘default-passive-events’ 参考：https://www.jianshu.com/p/23850d4cade8 出现原因： Chrome51 版本以后，Chrome 增加了新的事件捕获机制－Passive Event Liste...
Vue控制台警告： Added non-passive event listener to a scroll-blocking ‘touchmove‘ event. Consider markin
weixin_45716754的博客
08-25 1379
Passive Event Listeners：就是告诉前页面内的事件监听器内部是否会调用preventDefault函数来阻止事件的默认行为，以便浏览器根据这个信息更好地做出决策来优化页面性能。当属性passive的值为true的时候，代表该监听器内部不会调用preventDefault函数来阻止默认滑动行为，Chrome浏览器称这类型的监听器为被动（passive）监听器。违反：没有添加被动事件监听器来阻止’touchstart’事件，请考虑添加事件管理者’passive’，以使页面更加流畅。
[Violation] Added non-passive event listener to a scroll-blocking ＜some＞ event. Consider marking eve
黎小小的博客
11-23 817
浏览器页面警告：[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。
vue 鼠标事件控制台警告
我是小妖yun的博客
11-26 958
控制台警告 Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive 解决方法： 在事件上加事件修饰符passive 若无事件，则安装插件 default-passive-events > npm install default-passive-events -
解决 谷歌浏览器下 Added non-passive event listener to a scroll-blocking ‘mousewheel‘event.
没事别学JAVA
07-19 1129
解决 谷歌浏览器下 （ 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中解决chrome浏览器自动播放音频
05-25
在Vue中解决Chrome浏览器自动播放音频的问题可以通过两种方法： 1. 使用Vue的生命周期函数mounted()来控制音频的播放。在mounted()函数中，通过JavaScript代码控制音频的播放，这样就避免了Chrome浏览器自动播放音频的问题。 2. 使用HTML5的autoplay属性来控制音频的播放。在Vue的模板中，可以使用autoplay属性来控制音频的自动播放。这种方法需要注意的是，Chrome浏览器会禁止自动播放音频，需要用户手动操作才能播放。 下面是两种方法的示例代码： 1. 使用mounted()函数控制音频播放 ```html <template> <div> <audio ref="audio" src="audio.mp3"></audio> </div> </template> <script> export default { mounted() { this.$refs.audio.play(); } } </script> ``` 2. 使用autoplay属性控制音频播放 ```html <template> <div> <audio src="audio.mp3" autoplay></audio> </div> </template> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值