如何解决移动端滑动验证时页面跟随移动的问题

在写一个移动端网页的滑动验证时，如果手指在屏幕上滑动会触发手机自带的事件。比如手机切屏或返回上一页等等。查了下百度，发现有两种网页端的方法可以阻止移动端左右滑动触发上一下和下一页的操作。

阻止移动端滑动触发上一页下一页的方法

方法1：

CSS方法：

html{
    touch-action:none;
    touch-action:pan-y;
}

方法2：

使用JS代码

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});

到此这篇关于如何解决移动端滑动验证时页面跟随移动的问题就介绍到这了。奋斗吧！成功会属于你更多相关如何解决移动端滑动验证时页面跟随移动的问题内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！