移动端滑动验证时页面跟随移动的问题处理

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

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