解決ios系統 遮罩層下方螢幕能滑動的問題

谷歌浏覽器 使用 取消預設事件preventDefault 報錯如下：

Unable to preventDefault inside passive event listener due to target being treated as passive 

chrome 監聽touch類事件報錯：無法被動偵聽事件preventDefault，是新版本chrome 浏覽器報錯。

說明：說一下這個 preventDefault()是個什麼鬼，這個是取消預設事件的，如果這個函數起作用的，比如預設的表單送出，a連結的點選跳轉，就不好用了。

原因：google浏覽器為了最快速的相應touch事件，做出的改變。

曆史：當浏覽器首先對預設的事件進行響應的時候，要檢查一下是否進行了預設事件的取消。這樣就在響應滑動操作之前有那麼一絲絲的耽誤時間。

現在：google就決定預設取消了對這個事件的檢查，預設時間就取消了。直接執行滑動操作。這樣就更加的順滑了。

但是浏覽器的控制台就會進行錯誤提醒了。

具體情況：

從 chrome56 開始，在 window、document 和 body 上注冊的 touchstart 和 touchmove 事件處理函數，會預設為是 passive: true。浏覽器忽略 preventDefault() 就可以第一時間滾動了。

導緻下面的效果一緻：

wnidow.addEventListener('touchmove', func) 效果和下面一句一樣
wnidow.addEventListener('touchmove', func, { passive: true })
           

這樣會出現新的問題：

如果在以上這 3 個元素（ window、document 和 body ）的 touchstart 和 touchmove 事件處理函數中調用 e.preventDefault() ，會被浏覽器忽略掉，并不會阻止預設行為。

大家可以測試一下：

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

// 在 chrome56 中，照樣滾動，而且控制台會有提示，blablabla
window.addEventListener('touchmove', e => e.preventDefault())
           

那麼應該怎麼辦呢？？？

可以做到：

即不讓控制台提示，而且 preventDefault() 有效果呢？

兩個方案：

1、注冊處理函數時，用如下方式，明确聲明為不是被動的

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

2、應用 CSS 屬性 touch-action: none; 這樣任何觸摸事件都不會産生預設行為，但是 touch 事件照樣觸發。

touch-action 還有很多選項，

詳細請參考：touch-action

ios解決 

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

function touchs (event) {
   var e = event || window.event;

   e.preventDefault();
   e.stopPropagation();
   console.log('ddd');
}