Unable to preventDefault inside passive event listener due to target being treated as passive

2020-05-2054次阅读原生Jsjavascript

当浏览器首先对默认的事件进行响应的时候,要检查一下是否进行了默认事件的取消。这样就在响应滑动操作之前有那么一丝丝的耽误时间。
而新版本chrome浏览器为了最快速的响应touch事件,就决定默认取消了对这个事件的检查,直接执行滑动操作,这样就更加的顺滑了。
但是新版本chrome浏览器的控制台就会进行错误提醒:


Unable to preventDefault inside passive event listener due to target being treated as passive


无法被动侦听事件preventDefault。

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

wnidow.addEventListener('touchmove', func) 效果和下面一句一样
wnidow.addEventListener('touchmove', func, { passive: true })

这样会出现新的问题:如果在以上这3个元素的touchstart和touchmove事件处理函数中调用e.preventDefault() ,会被浏览器忽略掉,并不会阻止默认行为。

 

最简单的解决方法1(推荐)

使用全局样式样式去掉

* { touch-action: pan-y; }


解决办法2:

在touch的事件监听方法上绑定第三个参数{ passive: false },通过传递 passive 为 false 来明确告诉浏览器:事件处理程序调用 preventDefault 来阻止默认滑动行为。

ele.addEventListener('touchstart',fn,{ passive: false });
上一篇: Array.prototype.reduce找出字符长度最长的数组成员  下一篇: String.prototype.replace网页模板替换  

Unable to preventDefault inside passive event listener due to target being treated as passive相关文章