Unable to preventDefault inside passive event listener

转自:https://segmentfault.com/a/1190000008512184

测试:

 
body {
  margin: 0;
  height: 2000px;
  background: linear-gradient(to bottom, red, green);
}

// 在 chrome56 中,照样滚动,而且控制台会有提示,blablabla
window.addEventListener('touchmove', e => e.preventDefault())

  

那么如何解决这个问题呢?不让控制台提示,而且 preventDefault() 有效果呢?
两个方案:
1、注册处理函数时,用如下方式,明确声明为不是被动的
var func = function(e){

e.preventDefault();//firefox等
e.returnValue = false;

}
window.addEventListener('touchmove', func, { passive: false })

2、应用 CSS 属性 touch-action: none; 这样任何触摸事件都不会产生默认行为,但是 touch 事件照样触发。
touch-action 还有很多选项,详细请参考touch-action

[注]未来可能所有的元素的 touchstart touchmove 事件处理函数都会默认为 passive: true

原文地址:https://www.cnblogs.com/laneyfu/p/9808823.html