阻止移动端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()阻止浏览器的默认行为。