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。