vue项目non-passive event listener问题

最新推荐文章于 2024-04-18 10:33:01 发布
最新推荐文章于 2024-04-18 10:33:01 发布
阅读量1.1k 收藏
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40352933/article/details/111558564
版权

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’事件，请考虑添加事件管理者’passive’，以使页面更加流畅。原因是 Chrome51 版本以后，Chrome 增加了新的事件捕获机制－Passive Event Listeners；

解决方法:
1.使用cnpm(npm)下载依赖包
cnpm(npm) install default-passive-events --save
2.在入口文件main.js中引入
import ‘default-passive-events’
保存，问题解决

前端渣渣的进阶路程
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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”事件考虑将事件处理
egret工具：事件监听管理器
04-02
src.zip中包含：DelegateUtil.ts ，Dictionary.ts ，BC.ts，Main.ts DelegateUtil.ts 函数代理，方便传递参数和函数执行空间地址，包含原始参数和附加参数。 Dictionary.ts 支持存取少量的“对象”来当作存储数据的key. 重点见介绍下面的类，养成习惯模块销毁时用一句 BC.removeEvent(this)；可以有效防止出现遗漏移除的监听. 还有BC.addOnceEvent(...)；方法是也是懒人必不可少的方法。 BC类在actionscript中已经用了将近8年了，版本陆陆续续改过5次，这几天根据ts的特性修改了一个版本，值得推荐给大家。 BC.ts : 支持模糊移除事件，“BC.removeEvent(this, ”后面3个参数为模糊参数，可有可无，明确的参数必须相等才会移除. * 000 删除所有关于监听者的所有事件,通常在类销毁时使用一次 BC.removeEvent(this); * 001 指定相同回调函数的所有监听 BC.removeEvent(this,null,null,func); * 010 指定事件名的所有监听 BC.removeEvent(this,null,Event.COMPLETE,null); * 011 指定事件名，指定回调函数的所有监听 BC.removeEvent(this,null,Event.COMPLETE,func); * 100 删除指定通知者 和 监听者之间的所有监听 BC.removeEvent(this,dispatch,null,null); * 101 删除通知者 和 监听者之间使用同一回调函数的所有监听 BC.removeEvent(this,dispatch,null,func); * 110 删除通知者 和 监听者之间指定事件的所有监听 BC.removeEvent(this,dispatch,Event.COMPLETE,null); * 111 明确删除指定的事件监听 BC.removeEvent(this,dispatch,Event.COMPLETE,func); 代码： class Main extends egret.DisplayObjectContainer{ //申明一个广播对象“dispatchSprite” private dispatchSprite: egret.Sprite; public constructor() { super(); //字典使用对象作为key引用存储数据.对象作为key实际上需要进行遍历索引，所以在同一个字典中尽量不要添加过多的key会影响性能. var dic: Dictionary = new Dictionary(); var arr1: string[] = ["我是数组"]; var obj2: any = { name: "我是对象" }; var str3: string = "我是字符"; //添加到字典 dic.add(arr1, arr1); dic.add(obj2, obj2); dic.add(str3, str3); //打印字典内部的数据 dic.dump(); //申明一个广播对象“dispatchSprite” this.dispatchSprite = new egret.Sprite(); //添加一个自动会移除监听事件 BC.addOnceEvent(this, this.dispatchSprite, egret.Event.ENTER_FRAME, this.onEnterFrameOnce); //创建和监听一个Timer事件 var timer: egret.Timer = new egret.Timer(50); BC.addEvent(this, timer, egret.TimerEvent.TIMER, this.onEnterTimer); timer.start(); } /** * dispatchSprite的帧事件 */ public onE
JavaScript事件委托的技术原理探讨示例
12-11
如今的JavaScript技术界里最火热的一项技术应该是‘事件委托(event delegation)’了。使用事件委托技术能让你避免对特定的每个节点添加事件监听器；相反，事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件，找到是哪个子元素的事件。基本概念非常简单，但仍有很多人不理解事件委托的工作原理。这里我将要解释事件委托是如何工作的，并提供几个纯JavaScript的基本事件委托的例子。 假定我们有一个UL元素，它有几个子元素： 代码如下: <ul id=”parent-list”> <li id=”post-1″>Item 1</li> <li id=”post
vue-connection-listener:Vue事件总线插件监听在线离线更改
04-28
语音连接侦听器 Vue事件总线插件监听在线/离线更改 关于 每当导航器的连接状态更改时，都会发出“连接”事件，并带有一个指示新状态的布尔有效负载（在线= true，离线= false）。 安装 npm install --save vue-connection-listener 用法 main.js import Vue from "Vue" ; import bus from "./bus" ; // Event bus instance Vue . prototype . $bus = bus ; // Optional (but convenient) import VueConnectionListener from "vue-connection-listener" ; const connectionListener = new VueConnectionListener (
[Violation] Added non-passive event listener to a scroll-blocking ‘touchstart‘ event. Consider marki
qq_39196447的博客
01-30 738
【代码】[Violation] Added non-passive event listener to a scroll-blocking ‘touchstart‘ event. Consider marki。
laravel 事件/监听器实例代码
01-21
导语 上一篇文章实现了记录用户访问，设计上是有缺陷的，代码紧耦合在中间件。如果后续修改需求，不仅记录 ip、城市，还需要记录数据到新的数据表，或者需要进行其它统计，那么不停的增加、修改代码是不合理的。这个时候可以使用 Laravel 的事件/监听器进行处理。代码可查看 GitHub。 事件/监听器 Laravel 事件提供了简单的观察者模式实现，允许你订阅和监听应用中的事件。 观察者模式有时也被称作发布/订阅模式，该模式用于为对象实现发布/订阅功能：一旦主体对象状态发生改变，与之关联的观察者对象会收到通知，并进行相应操作。 以上是事件/监听器、观察者模式的简要说明。结合这次的需求理解，当
vue-throttle-event-基于requestAnimationFrame的油门事件。-Vue.js开发
05-27
基于requestAnimationFrame状态功能的vue-throttle-event节流事件使用requestAnimationFrame公开一个称为$ throttl的距离方法基于requestAnimationFrame状态属性的vue-throttle-event节流事件使用每个API的Vue组件中公开一个名为$ throttle的距离方法。准备安装npm $ npm install vue-throttle-event --save-dev Vue的main.js从'vue-throttle-event'导入VueThrottleEvent Vue.use（VueThrottleEvent）使用示例方法：{customEventHandler（e）{// e。 detail.origin是原始事件对象// //
毕业设计项目-个人博客。前端基于Vue，Element-UI和Vue-Element-Admin实现，后台采用SpringBoot+MybatisPlus+Rd
07-09
毕业设计项目-个人博客。前端基于Vue，Element-UI和Vue-Element-Admin实现，后台采用SpringBoot+MybatisPlus+Rdis等技术实现。
【VUE】[Violation] Added non-passive event listener to a scroll-blocking...
无限循环
08-10 4425
vue中警告[Violation] Added non-passive event listener to a scroll-blocking event. Consider ma…在基于 Element-ui 写项目的时候，Chrome 提醒：
[Violation ] Added non-passive event listener to ascroll- blocking ‘mousewheel’event Consider markin
qq_65949679的博客
07-27 2980
Violation ] Added non-passive event listener to ascroll- 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 '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...
[Violation] Added non-passive event listener to a scroll-blocking event. Consider marking event han
LRQQHM的博客
08-15 5266
Passive Event Listeners：就是告诉前页面内的事件监听器内部是否会调用preventDefault函数来阻止事件的默认行为，违反：没有添加被动事件监听器来阻止’touchstart’事件，请考虑添加事件管理者’passive’，以使页面更加流畅。这个是 Chrome51 版本以后，Chrome 增加了新的事件捕获机制－Passive Event Listeners；Passive Event Listeners - 被动事件监听器，在写H5页面的时候，Chrome 提醒。...
详解如何解决Vue和vue-template-compiler版本之间的问题
10-18
主要介绍了详解如何解决Vue和vue-template-compiler版本之间的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue-typescript-admin-mock-server:for vue-typecript-admin-template项目的模拟服务器
04-29
Vue TypeScript管理模拟服务器 项目的模拟服务器 演示链接 （由vue-typecript-admin-template使用） 概述 此项目中api文件夹下的javascript代码是从的打字稿源代码生成的（通过在此目录中运行tsc命令）。 唯一的手动更改是将mock-server.js重命名为index.js 。 昂首阔步 网址架构基于并遵循REST API标准。 info: { name: 'Mock API', description: 'Mock API for vue-typescript-admin-template.', version: '1.0.0' }, paths: { get: [ '/mock-api/v1/articles', '/mock-api/v1/articles/:id', '/mock-api/
vue3.0 vue-quill-editor.rar
09-19
vue3.0+vue-quill-editor+element富文本编辑引入可直接使用 可上传图片调整图片大小
Node.js EventEmmitter事件监听器用法实例分析
01-02
本文实例讲述了Node.js EventEmmitter事件监听器用法。分享给大家供大家参考，具体如下： Node.js 所有的异步 I/O 操作在完成时都会发送一个事件到事件队列。 events 模块只提供了一个对象： events.EventEmitter。EventEmitter 的核心就是事件触发与事件监听器功能的封装。 该模块已被node.js默认引，不需要使用require()显示引入。 EventEmitter 对象如果在实例化时发生错误，会触发 ‘error’ 事件。当添加新的监听器时，’newListener’ 事件会触发，当监听器被移除时，’removeListener’
vue-element-admin中文版本
07-20
该资源为一个后台管理系统，为vue-element-admin在git下搭建而成
Vue.js（自定义指令）
最新发布
Luo3255069063的博客
04-18 411
【代码】Vue.js（自定义指令）
【Day 2】JavaScript、Vue
Yudiannann的博客
04-17 884
内部脚本JavaScript 代码必须位于 <script></script> 标签之间（而在 HTML 文档中，可以在，放置的 <script>，可改善显示速度通过 src 引用demo.JS 文件。
vue2项目vue-quill-editor使用
08-09
要在Vue2项目中使用vue-quill-editor，你可以按照以下步骤进行操作： 1. 在项目中安装vue-quill-editor库。你可以使用npm或者yarn来安装，具体命令如下： ``` npm install vue-quill-editor 或 yarn add vue-quill-editor ``` 2. 在Vue组件中引入vue-quill-editor，并注册为全局组件。你可以在需要使用富文本编辑器的组件中添加以下代码： ```javascript import Vue from 'vue' import VueQuillEditor from 'vue-quill-editor' // 引入富文本编辑器的样式文件 import 'quill/dist/quill.snow.css' // 注册为全局组件 Vue.use(VueQuillEditor) ``` 3. 在模板中使用vue-quill-editor组件。你可以在需要的位置使用`<vue-quill-editor>`标签来展示富文本编辑器，如下所示： ```html <template> <div> <vue-quill-editor v-model="content"></vue-quill-editor> </div> </template> ``` 4. 在Vue实例中定义`content`属性，用于存储富文本编辑器的内容。你可以在`data`属性中添加`content`属性，如下所示： ```javascript export default { data() { return { content: '' } } } ``` 现在，你就可以在Vue2项目中使用vue-quill-editor来实现富文本编辑功能了。注意，你可能还需要根据具体需求进行配置和样式调整。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值