阻止移动端H5开发浏览器默认左右滑动行为 | 您所在的位置:网站首页 › div禁止滑动 › 阻止移动端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()阻止浏览器的默认行为。 |
CopyRight 2018-2019 实验室设备网 版权所有 |