阻止移动端H5开发浏览器默认左右滑动行为
Touch事件小知识
1.避免点击300ms延迟
css：
*{ touch-action: manipulation;}
正题:如何解决H5移动端开发浏览器默认左右滑动事件
在进行移动端开发时,由于浏览器自带的滑动行为，使手指只要左右滑动页面就可以上一页，下一页的跳转，体验可以说是十分的不好。为了解决这个问题，我在网上进行了一番搜索以及一番尝试得出了下面两种方法。现在就下面两种方法进行一个对比，希望帮助更多的朋友能够更快的解决这个问题。
之前虽然没有写过，但是也有听闻，因此首先想到的是对touch事件的监听来阻止左右滑动。查询后知道了用event.preventDefault()方法来阻止浏览器的默认行为。
round 1:
于是有了代码：
document.addEventListener("touchmove",function(e){e.preventDefalut()});
开始测试:
报错:[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.
原因:
不能在被动的监听器上使用preventDefault方法。
解决方法：就是在addEventListener方法里的第三个参数进行配置,{passive:false}，告诉它这个监听器不是被动的监听器。
也就是在这个时候我看到了touch-action这个CSS解决方法
round 2:
代码:
html{
touch-action:none;
}
测试:
的确左右都不滑动了,但是上下页不滑动了呀。
原因:
查阅文档后发现当touch-action为none的时候，移动端的所有touch默认事件全都被禁止了！
改进:
html{
touch-action:none;
touch-action:pan-y;
}
这样一来达到了效果了，CSS这个方法可行，还挺简单的。
round 3:
JS的方法还没有完成啊，这怎么能甘心。所以只能从判断左右滑动距离来判断是否横移了
代码:
var startX;
document.addEventListener("touchstart",function(e){
startX = e.targetTouches[0].pageX
});
document.addEventListener("touchmove",function(e){
var moveX = e.targetTouches[0].pageX;
if(Math.abs(moveX-startX)>0){
e.preventDefault();
}
});测试:
理想很丰满，结果不尽人意。因为上下滑动的时候多少左右会带一点横移呀。
解决方法:
搜索到一篇帖子https://www.jianshu.com/p/8ea7b555a3dd?utm_campaign，教会了我比较横移距离与垂直移动距离的大小，哪个大就是往哪个方向移动啊。妙哉！豁然开朗
var startX,startY;
document.addEventListener("touchstart",function(e){
startX = e.targetTouches[0].pageX;
startY = e.targetTouches[0].pageY;
});
document.addEventListener("touchmove",function(e){
var moveX = e.targetTouches[0].pageX;
var moveY = e.targetTouches[0].pageY;
if(Math.abs(moveX-startX)>Math.abs(moveY-startY)){
e.preventDefault();
}
},{passive:false});这个方法写了以后，的确达到了我想要的效果。
总结
阻止左右滑动的办法有两个:
1. css属性touch-action进行控制。
2. 使用js监听touch事件，使用event.preventDefault()阻止浏览器的默认行为。