阻止移动端H5开发浏览器默认左右滑动行为

阻止移动端H5开发浏览器默认左右滑动行为Touch事件小知识1.避免点击300ms延迟css:*{touch-action:manipulation;}正题:如何解决H5移动端开发浏览器默认左右滑动事件在进行移动端开发时,由于浏览器自带的滑动行为,使手指只要左右滑动页面就可以上一页,下一页的跳转,体验可以说是十分的不好。为了解决这个问题,我在网上进行了一番搜索以及一番尝试得出了下面两种方法。现在就下…

阻止移动端H5开发浏览器默认左右滑动行为"

Touch事件小知识

1.避免点击300ms延迟

css:

   *{ touch-action: manipulation;}

  

正题:如何解决H5移动端开发浏览器默认左右滑动事件

在进行移动端开发时,由于浏览器自带的滑动行为,使手指只要左右滑动页面就可以上一页,下一页的跳转,体验可以说是十分的不好。为了解决这个问题,我在网上进行了一番搜索以及一番尝试得出了下面两种方法。现在就下面两种方法进行一个对比,希望帮助更多的朋友能够更快的解决这个问题。

之前虽然没有写过,但是也有听闻,因此首先想到的是对touch事件的监听来阻止左右滑动。查询后知道了用event.preventDefault()方法来阻止浏览器的默认行为。

round 1:

于是有了代码:

document.addEventListener(“touchmove”,function(e){e.preventDefault()});

开始测试:

报错:[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()阻止浏览器的默认行为。

今天的文章阻止移动端H5开发浏览器默认左右滑动行为分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/32727.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注