Passive Event Listeners

最新推荐文章于 2024-05-14 10:04:24 发布
最新推荐文章于 2024-05-14 10:04:24 发布
阅读量209 收藏
点赞数
分类专栏： 浏览器 vue 文章标签： html vscode vue.js es6 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lucky_girl_wan/article/details/120080728
版权

vue3中写项目时，Chrome提示以下信息： 

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

翻译为：

[违规]将非被动事件侦听器添加到滚动阻止“滚轮”事件。将事件处理程序标记为“被动”以使页面更加响应。

原因为：

 Chrome51 版本以后，Chrome 增加了新的事件捕获机制－Passive Event Listeners；

解决办法：

1、npm i default-passive-events -S

2、main.js中加入：import 'default-passive-events'

Lucky_girl_wan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
你不知道的passive event listener-让移动端滑动体验起飞（优化页面滑动）
codingWeb的博客
08-07 853
优化前和优化后的对比 事情的起因是在腾讯面试的时候被问到了，被吊打了，自闭了，想想也不冤，因为以前确实从来没碰到过这样的问题，如果以前碰到过还回答不出来，我就去撞墙了 先来个场景： <script type="text/javascript"> document.addEventListener("touchstart", function(e){ e.preventDefault() }) </script> 当你去测试时： 报错了：Unable t
Passive Event Listeners - 被动事件监听器1
08-08
被动事件监听器（Passive Event Listeners）是现代Web开发中的一个重要优化策略，尤其是在构建高性能的Web应用程序时。这个概念的引入主要是为了提高页面的滚动性能和响应速度，特别是对于移动设备上的触摸事件。...
让页面滑动流畅得飞起的新特性：Passive Event Listeners
tengxy_cloud的专栏
10-19 1万+
在不久前的Google I/O 2016 Mobile Web Talk中，Google公布了一个让页面滑动更流畅的新特性Passive Event Listeners。该特性目前已经集成到Chrome51版本中。 Chrome51上使用Passive Event Listener特性前后的效果对比 链接地址 从效果对比视频中可以明显看到，使用Passive Event Listeners
记项目问题-1
CHUZHI_的博客
05-09 268
方法来解决这个问题。在新定义的方法中，代码检查了。参数不是布尔值，代码将其设置为一个空对象，并将。这样一来，就避免了在触发事件时出现报错的问题。方法进行修改，确保在没有明确设置。的情况下，其默认值为。
Passive Event Listeners——让页面滑动更加流畅的新特性
anminyao3477的博客
12-08 325
Passive Event Listeners - 被动事件监听器 在写webapp页面的时候，Chrome 提醒　 code 1 <code>[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider ma...
Passive event listeners
weixin_30745553的博客
07-28 86
https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md 转载于:https://www.cnblogs.com/sea-stream/p/11260954.html
[Web性能优化]Chrome 51 引入新特性：Passive event listeners
justjavac的专栏
12-18 606
在 Chrome 的 touch 事件监听器的页面中，80% 的页面都不会调用 preventDefault 来阻止事件的默认行为。在滑动流畅度上，有 10% 的页面增加至少 100ms 的延迟，1% 的页面甚至增加 500ms 以上的延迟
default-passive-events:使{被动
05-02
default-passive-events 当支持EventListenerOptions时，默认使{passive：true} 50行代码段，默认情况下启用某些事件的（）。 基本上，每次您声明新的时，它都会自动设置{Passive：true} 。 安装 yarn add default...
model_passive.rar_MODELL PASSIVE
07-14
Dyke. modeling and controlLLLLLLLL
Passive Components
10-19
Passive Components的基本介绍和说明
event
03-22
`passive`选项用于优化滚动性能；以及`preventDefault`和`stopPropagation`方法，分别用于阻止默认行为和阻止事件继续传播。 总的来说，"event"在IT领域的含义涉及到网页交互的核心机制，包括CSS的简单事件响应和...
高性能滚动优化：Passive Event Listeners
最新发布
gitblog_00081的博客
05-14 308
高性能滚动优化：Passive Event Listeners 项目地址:https://gitcode.com/WICG/EventListenerOptions 1、项目介绍 Passive Event Listeners 是一个针对DOM事件监听器的扩展，旨在通过允许禁用preventDefault方法来提高网页的滚动性能。这个特性由WHATWG官方DOM规范采纳并维护，主要用于解决因过度使...
移动端Web界面滚动性能优化: Passive event listeners
热门推荐
不断成长的我
04-16 1万+
移动端Web界面滚动性能优化: Passive event listeners今晚在阅读VueJS2的源码时，发现了下面的一段代码，感觉自己瞬间知识储备不够用了，所以决定深入研究一下，故总结得出此文。关于VueJS的源码解读，之后会整理出学习笔记。这里先简单记录一些碎片化的知识点。 try { const opts = {} Object.defineProperty(opts, '
下班后的时间精力生活管理办法（时间管理）
前端队长Daotin
03-04 159
阅读文本大概需要 9 分钟。最近购买了赵星《下班后写作，最有效的个人增值方法》课程，第一节课讲的是下班后的时间精力生活的管理办法，虽然只听了一节课，但是却觉得她讲述的这些方法非常好，有很...
passive event 解决方法
weixin_30279751的博客
09-14 267
为了让页面滚动的效果如丝般顺滑，从 chrome56 开始，在 window、document 和 body 上注册的 touchstart 和 touchmove 事件处理函数，会默认为是 passive: true。浏览器忽略 preventDefault()。 如果在以上这 3 个元素的touchstart和touchmove事件处理函数中调用e.preventDefault()...
addeventlistener事件第三个参数_【JavaScript 教程】事件——EventTarget 接口
weixin_39862484的博客
11-27 411
作者 | 阮一峰事件的本质是程序各个组成部分之间的一种通信方式，也是异步编程的一种实现。DOM 支持大量的事件，本章开始介绍 DOM 的事件编程。概述DOM 的事件操作(监听和触发)，都定义在EventTarget接口。所有节点对象都部署了这个接口，其他一些需要事件通信的浏览器内置对象(比如，XMLHttpRequest、AudioNode、AudioContext)也部署了这个接口。该...
vue项目non-passive event listener问题
Making_Bug的博客
07-29 879
解决的问题 使用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 问题原因：没有添加被动事件...
[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marki
sinat_42888557的博客
12-20 1321
某度翻译 将非被动事件侦听器添加到滚动阻止“鼠标滚轮”事件。考虑将事件处理程序标记为“被动”以使页更具响应性 解决： https://blog.csdn.net/dj0379/article/details/52883315 Google公布了一个让页面滑动更流畅的新特性Passive Event Listeners 1、npm i default-passive-events -S 2、ma...
to preventDefault inside passive event listener invocation.
10-20
Passive Event Listeners是一种浏览器优化性能的特性，它告诉页面内的事件监听器是否会调用preventDefault函数来阻止事件的默认行为。当属性passive的值为true时，代表该监听器内部不会调用preventDefault函数来阻止默认滑动行为，Chrome浏览器称这类型的监听器为被动(passive)监听器。而"to preventDefault inside passive event listener invocation"则是指在被动事件监听器内部调用preventDefault函数，这会导致浏览器忽略passive标记并执行preventDefault函数，从而影响页面性能。因此，为了避免这种情况，我们需要在声明事件监听器时将passive设置为true，或者在事件监听器内部避免调用preventDefault函数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值