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

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

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

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