移动端滑动验证为什么整个屏幕都在动？

最新推荐文章于 2024-01-25 10:34:17 发布

原创最新推荐文章于 2024-01-25 10:34:17 发布 · 1w 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

web前端专栏收录该内容

2 篇文章

订阅专栏

在开发移动端验证功能时遇到一个问题，当尝试拖动验证元素时，整个屏幕会跟随移动，影响用户体验。解决这个问题的关键在于阻止浏览器默认事件，确保只有验证元素响应拖动操作，避免屏幕滚动和应用切屏。

开发手机移动端验证时，发现拖动元素会触发手机浏览器自带事件，导致滑动失效或切屏，

解决方法：

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

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