Added non-passive event listener to a scroll-blocking ‘touchmove‘ event....

已于 2023-08-21 10:55:06 修改
阅读量4k 收藏 4
点赞数 2
文章标签： 前端 chrome
于 2023-03-07 16:26:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tonetwo/article/details/129384680
版权

1、问题描述

 在用Chrome开发项目时，当用到滚动事件scroll、滚轮事件wheel或者移端touchstart/touchmove/touchend等事件时，Chrome可能会报以下警告

2、原因

        项目没有添加事件管理者’passive’，而在谷歌浏览器里面 Chrome51 版本以后，Chrome 增加了新的事件捕获机制Passive Event Listeners ，当前仅支持mousewheel/touch相关事件，目前Chrome主要利用该特性来优化页面的滑动性能

3、解决办法

        在项目中安装 default-passice-events 插件来解决

//安装插件
npm install -S default-passive-events

//在min.js中引入插件
import 'default-passive-events'

tonetwo
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Optimal allocation of multi-sensor passive localization
02-21
To improve multi-sensor passive localization precision, the optimal allocation form of multi-sensor bearing-only localization is analyzed from the perspective of the geometric dilution of precision (GDOP) of the least squares (LS) algorithm. This paper indicates that whether the target lies inside the closed region formed by the sensors or not, the optimal allocation is when each adjacent cut angle between a sensor pair is identical, and all sensors are located on the border of the circle that h
ng-event-options:在角度模板中启用事件选项（捕获，被动，...）
05-14
NgEventOptions Angular的扩展事件绑定 特征 本机事件绑定支持passive ， capture和once事件选项 stopImmediatePropagation ， stopPropagation和preventDefault其他事件选项 事件操作员对throttle和debounce支持 用于在NgZone外部NgZone并且仅在platformBrowser内部绑定的角度事件选项 该模块仅压缩3KB ，因此无需担心 通过使用passive和NgZone选项，可以提高应用程序的速度。 通过使用预定义的其他选项来减少代码大小。 维基 查看Wiki 先决条件 查找本模块的先决条件 正在安装 查看安装说明 用法 查看用法 例子 查看示例 局限性 目前尚不支持键盘映射事件(keydown.enter.pcon) 作者 Poul Kruijt-初期工作-PierreDu
[Violation] Added non-passive event listener to a scroll-blocking ‘touchstart‘ event. Consider marki
qq_39196447的博客
01-30 849
【代码】[Violation] Added non-passive event listener to a scroll-blocking ‘touchstart‘ event. Consider marki。
谷歌浏览器关于Added non-passive event listener to a scroll-blocking...的错误处理
guizi0809的博客
08-23 6285
解决谷歌浏览器“Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.”警告
Added non-passive event listener to a scroll-blocking ‘touchstart‘ event. 警告解决记录
最新发布
m0_58031031的博客
03-10 564
default-passive-events插件。然后在项目的main.js引入。
topology.rar_Optimization-design_matlab优化设计_passive ely elx_大作业
07-14
拓扑优化程序 拓扑优化程序，研究生课程机械优化设计的课程大作业
Vue控制台警告： Added non-passive event listener to a scroll-blocking ‘touchmove‘ event. Consider markin
weixin_45847765的博客
07-27 6905
PassiveEventListeners就是告诉前页面内的事件监听器内部是否会调用preventDefault函数来阻止事件的默认行为，以便浏览器根据这个信息更好地做出决策来优化页面性能。当属性passive的值为true的时候，代表该监听器内部不会调用preventDefault函数来阻止默认滑动行为，Chrome浏览器称这类型的监听器为被动（passive）监听器。违反没有添加被动事件监听器来阻止'touchstart'事件，请考虑添加事件管理者'passive'，以使页面更加流畅。...
ElementUI校验[Violation] Added non-passive event listener to a scroll-blocking ‘touchmove‘ event. 问题解决
cabinx的博客
10-09 2万+
ElementUI表单校验[Violation] Added non-passive event listener to a scroll-blocking ‘touchmove’ event. 解决方案 1.问题描述： vue项目中使用ElementUI的表单form校验单的时候，出现以下警告： [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking eve
Added non-passive event listener to a scroll-blocking ‘touchmove‘ event解决方案
qq_71214810的博客
12-23 3083
触摸事件（touchmove）默认将具有滚动阻塞的特性，将非被动设置为被动（passive），以实现更流畅的滚动效果。，使页面更加具有响应性。
ITU-T G.9807.1 -2017
09-18
ITU-T标准,下一代对称10GPON标准, G.9807.1 10-Gigabit-capable symmetric passive optical network (XGS-PON) Amendment 1
Passive Event Listeners - 被动事件监听器1
08-08
Passive Event Listeners - 被动事件监听器在写webapp页面的时候，Chrome 提醒　 [Violat
default-passive-events:使{被动
05-02
default-passive-events 当支持EventListenerOptions时，默认使{passive：true} 50行代码段，默认情况下启用某些事件的（）。 基本上，每次您声明新的时，它都会自动设置{Passive：true} 。 安装 yarn add default...
藏经阁-From Passive to Proactive_ Dee.pdf
09-09
藏经阁-From Passive to Proactive_ Dee.pdf
Added non-passive event listener to a scroll-blocking ‘touchstart‘ event. Consider marking event han
weixin_48975022的博客
07-27 2231
Passive Event Listeners：就是告诉前页面内的事件监听器内部是否会调用preventDefault函数来阻止事件的默认行为，以便浏览器根据这个信息更好地做出决策来优化页面性能。当属性passive的值为true的时候，代表该监听器内部不会调用preventDefault函数来阻止默认滑动行为，Chrome浏览器称这类型的监听器为被动（passive）监听器。违反：没有添加被动事件监听器来阻止'touchstart'事件，请考虑添加事件管理者'passive'，以使页面更加流畅。
vue中警告[Violation] Added non-passive event listener to a scroll-blocking
weixin_43267006的博客
05-15 7132
vue中警告[Violation] Added non-passive event listener to a scroll-blocking event. Consider ma… 在基于 Element-ui 写项目的时候，Chrome 提醒： [Violation] Added non-passive event listener to a scroll-blocking ‘mousewheel’ event. Consider marking event handler as ‘passive’
Added non-passive event listener to a scroll-blocking ‘touchmove’ event
AmoLinoo的博客
07-21 727
代码】Addednon-passiveeventlistenertoascroll-blocking‘touchmove’event。
[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event.
热门推荐
weixin_40716786的博客
05-09 5万+
在基于 Element-ui 写项目的时候，Chrome 提醒： [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 marking event handler as 'passive' to make the page more responsive
07-15
这个问题是关于网页的性能优化。当浏览器遇到一个阻塞滚动的事件处理程序时，它会发出这个警告。通常情况下，你可以通过将事件处理程序标记为"被动"（passive）来解决这个问题，以提高页面的响应能力。 被动事件处理程序是指不会调用 `preventDefault()` 方法的事件处理程序。通过这样做，浏览器可以更好地优化滚动性能，因为它知道事件处理程序不会阻止默认的滚动行为。 要解决这个问题，你可以修改事件处理程序的选项来将其标记为被动。具体的实现方式取决于你使用的 JavaScript 框架或库。在大多数情况下，你可以通过传递一个选项对象作为第三个参数来指定事件处理程序的选项，并将 `passive` 属性设置为 `true`。例如： ```javascript element.addEventListener('mousewheel', handler, { passive: true }); ``` 这样做后，浏览器就不会再发出这个警告了，并且页面的滚动性能也会得到提升。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值