如何解决Added non-passive event listener to a scroll-blocking ‘mousewheel‘ event.

最新推荐文章于 2024-06-06 17:20:03 发布
最新推荐文章于 2024-06-06 17:20:03 发布
阅读量5.1k 收藏 7
点赞数 1
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_72760247/article/details/128602510
版权

这句话提示的意思是：没有添加被动事件监听器来阻止’touchstart’事件，请考虑添加事件管理者’passive’，以使页面更加流畅。

npm i default-passive-events -S

然后再mian.js入口文件引入即可解决。

import 'default-passive-events'

未及545
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
addeventlistener监听scroll跟touch(实例讲解)
12-04
这三个事件只在手机上生效 touchstart：手指开始触屏 touchmove：手指移动 touchend：手指触屏结束 这个事件在手机上跟在pc端都生效 scroll事件 addeventlistener(name,callback,optional,useCapture) useCapture：事件是否用捕获事件，从外到里，true                         默认为false:使用冒泡事件，从里到外 optional:{      passive:false时，阻止默认事件，ture时不阻止默认事件(默认值是false) } passive:true可以防止
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”事件考虑将事件处理
控制台： [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 ‘touchstart‘ event. Consider marki
最新发布
qubes的专栏
06-06 590
这个警告通常出现在浏览器的开发者工具控制台中，是由于添加了非被动（non-passive）的事件监听器导致的。问题出在eruda这个工具 在tuchstart事件中使用了非被动事件监听器。什么是非被动（non-passive）事件监听器和被动事件监听器？非被动（non-passive）事件监听器。
[Violation ] Added non-passive event listener to ascroll- blocking ‘mousewheel’event Consider markin
qq_65949679的博客
07-27 3709
Violation ] Added non-passive event listener to ascroll- 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. Consider marking event han
weixin_48975022的博客
07-27 2529
Passive Event Listeners：就是告诉前页面内的事件监听器内部是否会调用preventDefault函数来阻止事件的默认行为，以便浏览器根据这个信息更好地做出决策来优化页面性能。当属性passive的值为true的时候，代表该监听器内部不会调用preventDefault函数来阻止默认滑动行为，Chrome浏览器称这类型的监听器为被动（passive）监听器。违反：没有添加被动事件监听器来阻止'touchstart'事件，请考虑添加事件管理者'passive'，以使页面更加流畅。
关于Added non-passive event listener to a scroll-blocking ‘wheel‘ event. Consider marking event handle
zsj702177的博客
08-17 7965
Passive Event Listeners：就是告诉前页面内的事件监听器内部是否会调用preventDefault函数来阻止事件的默认行为，以便浏览器根据这个信息更好地做出决策来优化页面性能。当属性passive的值为true的时候，代表该监听器内部不会调用preventDefault函数来阻止默认滑动行为，Chrome浏览器称这类型的监听器为被动（passive）监听器。违反：没有添加被动事件监听器来阻止’touchstart’事件，请考虑添加事件管理者’passive’，以使页面更加流畅。...
浏览器告警提示:Added non-passive event listener to a scroll-blocking ‘touchstart‘ event. Consider markin...
古月水告的博客
01-24 5399
超烦有没有，触发一次事件它就提示一次，洁癖的我今天就告诉你们怎么处理掉这个问题。
Passive Event Listeners - 被动事件监听器1
08-08
被动事件监听器（Passive Event Listeners）是现代Web开发中的一个重要优化策略，尤其是在构建高性能的Web应用程序时。这个概念的引入主要是为了提高页面的滚动性能和响应速度，特别是对于移动设备上的触摸事件。...
default-passive-events:使{被动
05-02
default-passive-events 当支持EventListenerOptions时，默认使{passive：true} 50行代码段，默认情况下启用某些事件的（）。 基本上，每次您声明新的时，它都会自动设置{Passive：true} 。 安装 yarn add default...
ng-event-options:在角度模板中启用事件选项（捕获，被动，...）
05-14
本机事件绑定支持passive ， capture和once事件选项 stopImmediatePropagation ， stopPropagation和preventDefault其他事件选项 事件操作员对throttle和debounce支持 用于在NgZone外部NgZone并且仅在...
retext-passive:用于检查被动语音的插件
05-10
var vfile = require ( 'to-vfile' ) var report = require ( 'vfile-reporter' ) var unified = require ( 'unified' ) var english = require ( 'retext-english' ) var stringify = require ( 'retext-stringify...
Added non-passive event listener to a scroll-blocking ‘touchstart‘ event. Consider marking event...
yjl13598765406的博客
06-28 1万+
vue项目在chrome版本下验证触发的警告
Added non-passive event listener to a scroll-blocking ‘touchstart‘ event. Consider marking event
qq_18847065的博客
12-15 1185
Passive Event Listeners：就是告诉前页面内的事件监听器内部是否会调用preventDefault函数来阻止事件的默认行为，以便浏览器根据这个信息更好地做出决策来优化页面性能。当属性passive的值为true的时候，代表该监听器内部不会调用preventDefault函数来阻止默认滑动行为，Chrome浏览器称这类型的监听器为被动（passive）监听器。来阻止’touchstart’事件，请考虑添加事件管理者’passive’，以使页面更加流畅。
谷歌浏览器关于Added non-passive event listener to a scroll-blocking...的错误处理
guizi0809的博客
08-23 6483
解决谷歌浏览器“Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.”警告
控制台warn解决[Violation] Added non-passive event listener to a scroll-blocking ‘mousewheel‘ event. Consi
Wildness_的博客
02-28 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. [违规]添加非被动事件监听器到滚动阻塞'鼠标滚轮'事件。 考虑将事件处理程序标记为“被动”，以使页面响应更快。 解决方案： 1、npm i def..
Added non-passive event listener to a scroll-blocking ‘mousewheel‘ event.
weixin_48648855的博客
06-10 8598
一直报这个警告 – event.js:106 [Violation] Added non-passive event listener to a scroll-blocking ‘mousewheel’ event. Consider marking event handler as ‘passive’ to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952 试了网上的方法，安装依
开发时遇到问题
weixin_49884775的博客
07-21 1522
开发所遇问题
【 Added non-passive event listener to a scroll-blocking ‘touchstart‘ event. Consider marking event 】
regretTAT的博客
08-24 670
组件外边再包一层div即可。
Added non-passive event listener to a scroll-blocking 'mousewheel' event 这个怎么解决
09-13
这句话的意思是在滚动阻止鼠标滚轮事件中添加了非被动事件监听器。 解决方法可以尝试改变事件监听器的类型，将非被动事件监听器改为被动事件监听器。被动事件监听器可以减少浏览器的计算和回流（reflow），从而提高性能。 可以使用 `addEventListener` 方法来添加事件监听器，第三个参数用来指定是否使用被动事件监听器，如下所示： ``` element.addEventListener('event', function() { // Your code here }, { passive: true }); ``` 在这种情况下，如果浏览器支持被动事件监听器，它会被使用。否则，会使用默认的非被动事件监听器。 另外，你也可以尝试其他的优化方法，比如使用 `requestAnimationFrame` 来替换 `scroll` 事件，或者减少 DOM 元素的数量和复杂度。这些方法都可以帮助你提升网站的性能。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值