微信浏览器阻止页面拖动

我是在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