首页 > 其他分享 >【VUE】[Violation] Added non-passive event listener to a scroll-blocking...

【VUE】[Violation] Added non-passive event listener to a scroll-blocking...

时间:2024-09-26 15:47:03浏览次数:8  
标签:passive non VUE listener Added 监听器 event

1.问题

[Violation] Added non-passive event listener to a scroll-blocking <某些> 事件. Consider marking event handler as 'passive' to make the page more responsive. See <URL>
译: [违规]向滚动阻止添加了非被动事件侦听器<某些> 事件. 请考虑将事件处理程序标记为“被动”,以提高页面的响应能力。请参阅<URL>

or:

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

2.问题原因

Chrome51 版本以后,chrome 增加了新的事件捕获机制-Passive Event Listeners

  • Passive Event Listeners

就是告诉前页面内的事件监听器内部是否会调用preventDefault函数来阻止事件的默认行为,以便浏览器根据这个信息更好地做出决策来优化页面性能。当属性passive的值为true的时候,代表该监听器内部不会调用preventDefault函数来阻止默认滑动行为,Chrome浏览器称这类型的监听器为被动(passive)监听器。目前Chrome主要利用该特性来优化页面的滑动性能,所以Passive Event Listeners特性当前仅支持mousewheel/touch相关事件。

  • chrome官方文献:

《Use passive listeners to improve scrolling performance》(译: 使用被动监听器优化滚动体验)

3.解决方案

1.安装default-passive-events

 2.在src目录下的main.js中引入

3.重启项目即可

 

 

参考链接---【VUE】[Violation] Added non-passive event listener to a scroll-blocking...-CSDN博客

 

标签:passive,non,VUE,listener,Added,监听器,event
From: https://www.cnblogs.com/pwindy/p/18433565

相关文章

  • 基于django+vue智能出行系统设计与实现【开题报告+程序+论文】-计算机毕设
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着城市化进程的加速和居民生活水平的提高,交通出行已成为现代社会不可或缺的一部分。然而,传统出行方式面临着交通拥堵、资源浪费、环境污......
  • 基于django+vue在线视频网站【开题报告+程序+论文】-计算机毕设
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着互联网技术的飞速发展和宽带网络的普及,视频内容已成为人们日常生活中不可或缺的一部分。在线视频网站作为数字时代的重要产物,不仅为用......
  • 基于django+vue在线家庭语数外作业系统的设计与实现【开题报告+程序+论文】-计算机毕
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着互联网技术的飞速发展和教育信息化的不断深入,传统教育模式正逐步向更加灵活、高效的在线教育模式转变。在家庭教育中,家长往往面临辅导......
  • 18 vue3之自动引入ref插件&深入使用v-model
    自动引入插件后无需再引入ref等使用自动引入插入无需在import{ref,reactive}from"vue"做这样的操作npmi unplugin-auto-import-D vite配置importAutoImportfrom'unplugin-auto-import/vite'//使用vite版本exportdefaultdefineConfig({ plugins:[vu......
  • VUE2 使用 el-upload 实现单文件上传、删除、预览(上传后隐藏上传图片按钮)
    实现后效果展示:上传前:上传后:注意点:on-change事件不要与on-success事件同时使用Demo:<template><div><el-uploadlist-type="picture-card"accept="image/*":file-list="fileList":action="uploadIma......
  • Vue Router 路由组件传参
    VueRouter路由组件传参基本概念与作用动态路由参数查询字符串参数示例一:使用动态路由参数示例二:使用查询字符串参数示例三:通过路由守卫传递参数示例四:使用命名路由示例五:组合使用多种参数传递方式实际开发中的技巧VueRouter为Vue.js应用提供了完整的路由解决......
  • 基于微信小程序的校园二手平台{UNIAPP+SSM+MySQL+Vue}
    目录一、前言二、技术介绍三、系统实现四、论文参考五、核心代码六、数据库文件 七、其他案例八、源码获取作者介绍:✌️大厂全栈码农|毕设实战开发,CSDN平台Java领域新星创作者,专注于大学生项目实战开发、讲解和毕业答疑辅导。✌️作者博客:曾几何时......
  • 基于springboot和vue的教务学生选课管理系统的设计与实现 (含源码+sql+视频导入教程)
    ......
  • 基于 Flask 和 Vue 的 MVC 分层结构详解
    在现代web应用开发中,MVC(Model-View-Controller)架构是一种常用的设计模式。它将应用程序分为三部分:模型(Model)、视图(View)和控制器(Controller),以实现清晰的职责分离和代码的可维护性。今天,我们将详细解释如何在Flask和Vue的组合中实现这一架构。一、什么是MVC分层结构Model......
  • 基于SpringBoot+MySQL+SSM+Vue.js的智能停车计费系统设计与实现(附论文)
    获取见最下方名片信息获取见最下方名片信息获取见最下方名片信息演示视频基于SpringBoot+MySQL+SSM+Vue.js的智能停车计费系统设计与实现(附论文)技术描述开发工具:Idea/Eclipse数据库:MySQLJar包仓库:Maven前端框架:Vue/ElementUI后端框架:Spring+SpringMVC......