美文网首页
浏览器触摸滑动事件不阻止默认行为?

浏览器触摸滑动事件不阻止默认行为?

作者: 指尖轻敲 | 来源:发表于2018-08-27 14:48 被阅读82次

      报错:Unable to preventDefault inside passive event listener due to target being treated as passive.

      最近在做企业微信的三方应用,由于使用的react,所以选择了React WeUI这个UI框架,说实话用起来感觉一般。不过不影响使用,常用组件也挺多的。

    在使用一个Picker组件的时候碰到了一个问题,组件如图:

    Picker.png

    当滑动选择器的时候,会出现报错,但是不影响使用,报错如图:

    image.png

    查了一下,看到有人总结过这个问题,大致如下:

      正常情况下,浏览器要在执行事件处理函数之后才知道是否调用preventDefault()阻止默认事件,这就导致了浏览器响应滑动有延迟。
      针对这个问题,Chrome浏览器也做了一些调整,从chrome56开始,在 window、document 和 body 上注册的 touchstart 和 touchmove 事件处理函数,会默认为是 passive: true。

    window.addEventListener('touchmove',function(){});  等价于==>
    window.addEventListener('touchmove',function(){},{passive: true});
    

    这样会出现什么效果呢?就是浏览器会忽略掉preventDefault(),所以在事件中写e.preventDefault()代码是无效的。这样就可以保证滚动在第一时间就可以执行。如果在事件中调用了preventDefault()就会出现警告。

    解决方法

    那么怎么解决这个问题呢?可以通过两中方法来解决:

    1. 监听事件时,指定passive: false,明确声明为不是被动的。
    window.addEventListener('touchmove', func, { passive: false })
    
    1. 通过CSS的touch-action: none属性,这样任何触摸事件都不会产生默认行为
    body{
        touch-action: none;
    }
    

    相关文章

      网友评论

          本文标题:浏览器触摸滑动事件不阻止默认行为?

          本文链接:https://www.haomeiwen.com/subject/dcpziftx.html