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() 有效果呢？
兩個方案：
一、註冊處理函數時，用以下方式，明確聲明爲不是被動的
var func = function(e){

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

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

二、應用 CSS 屬性 touch-action: none; 這樣任何觸摸事件都不會產生默認行爲，可是 touch 事件照樣觸發。
touch-action 還有不少選項，詳細請參考touch-action

[注]將來可能全部的元素的 touchstart touchmove 事件處理函數都會默認爲 passive: true