微信瀏覽器阻止頁面拖動

我是在pc端  用swiper作了個整屏縱向滑動的效果，（用的框架是vue），雖然是個pc端項目，可是我想盡可能的去適配移動端，爲了方便期間，我把項目連接發送到了微信上，而後在微信裏直接點擊頁面連接進去了，

這時，問題出現了，我發現當我用手指拖動頁面時，會很是很差使，特別是切換到最底部的一屏時，簡直沒法往上拖動切換，我一拖動，整個頁面就往下被拖動了，剛開始不知所措，而後上網查，結果查出了緣由，

這是由於，在微信瀏覽器中，瀏覽器沒能很好的分辨出個人拖動是拖動整個文檔頁面，仍是拖動swiper裏的slide使slide切換，

因而對症下藥：我選擇把body的touchmove事件去掉（全部的子元素的touchmove事件，冒泡到body後都會中止繼續冒泡）

document.body.addEventListener('touchmove' , function(e){

　　e.preventDefault();

})；

這太簡單粗暴了，我本身又兼容了一下代碼

document.body.addEventListener('touchmove' , function(e){

　　var e=e||window.event;

　　e.preventDefault();

},false)

 

 

 

在微信瀏覽器上試了一下，拖動已經好使了！！！！

正在興奮之餘，個人眼角餘光票到了控制檯，好像有一段紅字哎？？？？？？？？報錯了？？？？（谷歌瀏覽器）

報錯是：Unable to preventDefault inside passive event listener due to target being treated as passive.

有道詞典翻譯是這樣的：沒法防止被動事件偵聽器內部的默認，由於目標被視爲被動的

 

翻譯了也不懂是哪裏出錯了，而後把報錯代碼貼到了度娘上，搜到答案了！！！！

大體意思是這樣的：

因爲瀏覽器必需要在執行事件處理函數以後，才能知道有沒有掉用過 preventDefault() ，這就致使了瀏覽器不能及時響應滾動，略有延遲。
因此爲了讓頁面滾動的效果如絲般順滑，從 chrome56 開始，在 window、document 和 body 上註冊的 touchstart 和 touchmove 事件處理函數，會默認爲是 passive: true。瀏覽器忽略 preventDefault() 就能夠第一時間滾動了。 舉例： wnidow.addEventListener('touchmove', func) 效果和下面一句同樣 wnidow.addEventListener('touchmove', func, { passive: true })

如下是我的理解：

我想禁止掉touchmove事件，可是隻能等到touchmove事件觸發以後，纔會執行個人preventDefault()。
因爲如今谷歌瀏覽器默認touchstart 和 touchmove 事件處理函數是被動的；也就是{ passive: true }； passive：被動的
而如今我是調用了touchmove事件以後纔將他禁用的，因此會出現上面的報錯，被動事件不能被阻止。
好了，報錯緣由找到了，那我將touchmove事件改爲主動的不就好了嘛。。。。。。。

document.body.addEventListener('touchmove' , function(e){

　　var e=e||window.event;

　　e.preventDefault();

}, { passive: false } )

 

報錯消失了。。。

成功阻止微信拖動事件！！

 

網上還有解決辦法：搬過來，佔爲己有

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

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