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

  报错：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 })

2. 通过CSS的touch-action: none属性，这样任何触摸事件都不会产生默认行为

body{
    touch-action: none;
}