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