18910140161

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

顺晟科技

2021-08-31 13:06:14

72

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

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

方法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});
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航