谷歌浏览器事件坑:Unable to preventDefault inside passive event listener invocation.

在Chrome56+版本中,`touchstart`和`touchmove`事件默认为被动。default-passive-events插件可能导致`preventDefault()`无效。解决方法包括明确设置事件监听器为非被动或使用`touch-action:none`。如果仍有问题,需卸载此插件并注释相关导入。
摘要由CSDN通过智能技术生成

背景

在前面我引入了default-passive-events插件,解决了
在这里插入图片描述
浏览器告警 相关文章,图一时畅快,现在出现问题了。

问题

在这里插入图片描述
出现这个问题就是引入default-passive-events插件导致的,注释了在main.js引入的就没有报错了。

为什么

从 chrome56 开始,在 window、document 和 body 上注册的 touchstart 和 touchmove 事件处理函数,会默认为是 passive: true。浏览器忽略 preventDefault() 就可以第一时间滚动了。

// 两句话的效果一样
wnidow.addEventListener('touchmove', func) 
wnidow.addEventListener('touchmove', func, { passive: true })

解决

如何做到即不让控制台提示,而且 preventDefault() 有效果呢?
1、注册处理函数时,用如下方式,明确声明为不是被动的

window.addEventListener(‘touchmove’, func, { passive: false })

2、应用 CSS 属性 touch-action: none; 这样任何触摸事件都不会产生默认行为

但是如果上述两个方法仍不生效,就检查是否安装了default-passive-events依赖,安装了就卸载然后在main.js中注释掉import default-passive-events,它默认情况下启用某些事件的被动事件侦听器,基本上每次声明新的事件监听器时,都会自动设置{ passive: true }
default-passive-events插件是用来解决谷歌浏览器消除Passive Event Listeners(被动事件警告)的方法。

进退两难,求大佬解答?

default-passive-events插件是解决浏览器告警的,我不想浏览器有告警信息,但加上又使浏览器报错,怎么处呢?有大佬知道吗?求告知。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值