Passive Event Listeners

最新推荐文章于 2024-08-20 12:36:38 发布

Lucky_girl_wan

最新推荐文章于 2024-08-20 12:36:38 发布

阅读量299

点赞数

分类专栏：浏览器 vue 文章标签： html vscode vue.js es6 前端

本文链接：https://blog.csdn.net/lucky_girl_wan/article/details/120080728

版权

vue 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

浏览器

4 篇文章 0 订阅

订阅专栏

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'

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Lucky_girl_wan

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

移动端Web界面滚动性能优化: Passive event listeners

不断成长的我

04-16

1万+

移动端Web界面滚动性能优化: Passive event listeners今晚在阅读VueJS2的源码时，发现了下面的一段代码，感觉自己瞬间知识储备不够用了，所以决定深入研究一下，故总结得出此文。关于VueJS的源码解读，之后会整理出学习笔记。这里先简单记录一些碎片化的知识点。 try { const opts = {} Object.defineProperty(opts, '

vue element chrome 警告信息non-passive event listener解决

qq_36350600的博客

09-16

2981

vue element chrome 警告信息non-passive event listener解决前言解决方法方法一(安装default-passive-events)方法二(修改element-plus源代码)参考链接前言用element-plus搞项目的时候一直报下面这个警告, 主要是在用<el-table></el-table>的地方想要知道关于警告详情的,可以参考博文下发的参考链接,我就不多赘述了 [Violation] Added non-passive eve

参与评论您还未登录，请先登录后发表或查看评论

让页面滑动流畅得飞起的新特性：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

Added non-passive event listener to a scroll-blocking ＜some＞ event. Consider marking event handler a

jieyucx的博客

08-20

1598

被动模式的事件监听器可以提升滚动性能，因为它们不会阻止浏览器在事件触发时进行默认的滚动行为。这个警告是因为在监听滚动事件时，没有指定事件处理程序为被动的(passive)，可能会导致页面滚动时出现性能问题。从源头讲在添加事件监听的地方，为事件处理程序加上一个对象，包含passive: true的属性，表示这个事件处理程序是被动的。这在某些情况下可能是必要的，例如需要阻止触摸事件的默认滚动行为。具体来说，它的作用是确保所有添加的事件监听器的 passive。是一个接口，所有可以接收事件的对象（如。

Passive Event Listeners——让页面滑动更加流畅的新特性

anminyao3477的博客

12-08

349

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

104

https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md 转载于:https://www.cnblogs.com/sea-stream/p/11260954.html

Passive Event Listeners - 被动事件监听器1

08-08

被动事件监听器（Passive Event Listeners）是现代Web开发中的一个重要优化策略，尤其是在构建高性能的Web应用程序时。这个概念的引入主要是为了提高页面的滚动性能和响应速度，特别是对于移动设备上的触摸事件。...

unable to preventdefault inside passive event listener due to target being t

最新发布

09-10

当您遇到 "unable to preventDefault inside passive event listener due to target being treated as" 的错误时，这通常发生在使用被动事件监听器（passive event listeners）时，比如在处理滚动事件（scroll event...

ant design mobile 日历组件下拉报Unable to preventDefault inside passive event listener invocation

06-26

通常意味着你在尝试阻止事件冒泡（preventing the default action）时，遇到了浏览器的默认行为限制，因为被动事件监听器（passive event listeners）不允许阻止事件。在某些情况下，像触摸滑动这样的事件，浏览器...

[Web性能优化]Chrome 51 引入新特性：Passive event listeners

justjavac的专栏

12-18

636

在 Chrome 的 touch 事件监听器的页面中，80% 的页面都不会调用 preventDefault 来阻止事件的默认行为。在滑动流畅度上，有 10% 的页面增加至少 100ms 的延迟，1% 的页面甚至增加 500ms 以上的延迟

高性能滚动优化：Passive Event Listeners

gitblog_00081的博客

05-14

349

高性能滚动优化：Passive Event Listeners 去发现同类优质开源项目:https://gitcode.com/ 1、项目介绍 Passive Event Listeners 是一个针对DOM事件监听器的扩展，旨在通过允许禁用preventDefault方法来提高网页的滚动性能。这个特性由WHATWG官方DOM规范采纳并维护，主要用于解决因过度使用preventDefault导致的...

下班后的时间精力生活管理办法（时间管理）

前端队长Daotin

03-04

181

阅读文本大概需要 9 分钟。最近购买了赵星《下班后写作，最有效的个人增值方法》课程，第一节课讲的是下班后的时间精力生活的管理办法，虽然只听了一节课，但是却觉得她讲述的这些方法非常好，有很...

passive event 解决方法

weixin_30279751的博客

09-14

278

为了让页面滚动的效果如丝般顺滑，从 chrome56 开始，在 window、document 和 body 上注册的 touchstart 和 touchmove 事件处理函数，会默认为是 passive: true。浏览器忽略 preventDefault()。如果在以上这 3 个元素的touchstart和touchmove事件处理函数中调用e.preventDefault()...

addeventlistener事件第三个参数_【JavaScript 教程】事件——EventTarget 接口

weixin_39862484的博客

11-27

452

作者 | 阮一峰事件的本质是程序各个组成部分之间的一种通信方式，也是异步编程的一种实现。DOM 支持大量的事件，本章开始介绍 DOM 的事件编程。概述DOM 的事件操作(监听和触发)，都定义在EventTarget接口。所有节点对象都部署了这个接口，其他一些需要事件通信的浏览器内置对象(比如，XMLHttpRequest、AudioNode、AudioContext)也部署了这个接口。该...

你不知道的passive event listener-让移动端滑动体验起飞（优化页面滑动）

codingWeb的博客

08-07

899

优化前和优化后的对比事情的起因是在腾讯面试的时候被问到了，被吊打了，自闭了，想想也不冤，因为以前确实从来没碰到过这样的问题，如果以前碰到过还回答不出来，我就去撞墙了先来个场景： <script type="text/javascript"> document.addEventListener("touchstart", function(e){ e.preventDefault() }) </script> 当你去测试时：报错了：Unable t

vue项目non-passive event listener问题

Making_Bug的博客

07-29

927

解决的问题使用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

1392

某度翻译将非被动事件侦听器添加到滚动阻止“鼠标滚轮”事件。考虑将事件处理程序标记为“被动”以使页更具响应性解决： https://blog.csdn.net/dj0379/article/details/52883315 Google公布了一个让页面滑动更流畅的新特性Passive Event Listeners 1、npm i default-passive-events -S 2、ma...

[Violation] Added non-passive event listener to a scroll-blocking ＜某些＞ ...

weixin_45586038的博客

11-11

1551

Chrome51 版本以后，Chrome 增加了新的事件捕获机制－Passive Event Listeners，导致触发了告警。使用Element Plus中的TimePicker组件时，只要触发了touchu事件，控制台就会报警告。在main.js 中引入。

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函数。