Unable to preventDefault inside passive event listener

在做禁止浏览器或微信下拉出现网页来源的这个功能时用到了下面的代码

document.body.addEventListener('touchmove', e => e.preventDefault())

在控制台看到了下面的报错:

Unable to preventDefault inside passive event listener due to target being treated as passive. 
See https://www.chromestatus.com/features/5093566007214080

于是google后发现

由于浏览器必须要在执行事件处理函数之后,才能知道有没有掉用过 preventDefault() ,这就导致了浏览器不能及时响应滚动,略有延迟。

所以为了让页面滚动的效果如丝般顺滑,从 chrome56 开始,在 windowdocument 和 body 上注册的 touchstart 和 touchmove
事件处理函数,会默认为是 passive: true。浏览器忽略执行 preventDefault() 就可以第一时间滚动了,并不会阻止默认行为。

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

那么如何解决这个问题呢?不让控制台提示,而且 preventDefault() 有效果呢?

两个方案:

  • 1、注册处理函数时,用如下方式,明确声明为不是被动的
doc.body.addEventListener('touchmove', e => e.preventDefault(), { passive: false })
  • 2、CSS 属性 touch-action: none;
    这样任何触摸事件都不会产生默认行为,但是 touch 事件照样触发。

文章作者: 徐辉波
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 徐辉波 !
评论
 上一篇
vue插件开发 vue插件开发
在vue项目开发中,使用组件的频率远大于插件,但是组件需要在页面中用components引用,多个页面使用就要引用多次,这样使用率很高的组件一般我们希望全局注册后直接就可以在相应页面使用,因此我们需要将他们封装成插件 简而言之,插件可以
2018年10月23日
下一篇 
HexoBlogClient使用指南 HexoBlogClient使用指南
HexoBlogClient基于HexoClient二次开发,是一个开源项目Github地址,本文将从Hexo博客的创建,客户端的使用,以及线上自动发布等各个方面讲解使用。 前提 本客户端的使用需要配置hexo博客,创建hexo博客的
2018年10月21日
  目录