touchmove事件中禁止滚动

今天写一个简单的react轮播插件,发现touchmove的preventDefualt()无效,且chrome浏览器给出下面提示:

react-dom.development.js:1458 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

看了下链接里的描述,大意是Chrome54开始通过addEventListener给元素添加touchStart、touchMove事件监听时,addEventListener第三个参数的passive会默认为true,以提高页面滚动性能。但此时事件处理程序里e.preventDefault()会被浏览器自动忽略。

react的事件机制貌似还未对此细节做反应,但是我们可以显式将addEventListener的passive设置为false达到预期效果。

...
  componentDidMount(){
    this.SwiperContainer.current.addEventListener("touchmove",this.touchMoveBanScroll,{passive:false});
  }
  componentWillUnmount(){
    this.SwiperContainer.current.removeEventListener("touchmove",this.touchMoveBanScroll);    
  }
...

done。

猜你喜欢

转载自blog.csdn.net/weixin_36094484/article/details/81629740
今日推荐