1. 程式人生 > >移動端判斷用戶滑動方向

移動端判斷用戶滑動方向

絕對值 touch brush edt end alert 手指 first 滑動方向

思路:

(1)獲取用戶的滑動手指初始坐標

(2)獲取用戶滑動結束時的手指坐標

(3)比較x,y方向上的絕對值,用於判斷滑動方向是左右還是上下

(4)最後實際判斷具體方向

/*註意touchstart , touthmove 中 坐標存放在e.targetTouches[0]*/
/* touchend 中 坐標存放在 e.changedTouches[0] */
var firstX = 0,firstY = 0,endX = 0,endY = 0;//初始化坐標值
window.addEventListener("touchstart",function(e){
	firstX = e.targetTouches[0].clientX;
	firstY = e.targetTouches[0].clientY;
})
window.addEventListener("touchend",function(e){
	endX = e.changedTouches[0].clientX;
	endY = e.changedTouches[0].clientY;
	moveX = endX - firstX;//判斷左右
	moveY = endY - firstY;//判斷上下
	if(Math.abs(moveX) > 60 || Math.abs(moveY) > 60){//判斷是滑動,不是點擊
		if(Math.abs(moveX) > Math.abs(moveY))){
			/*判斷橫向移動的距離和縱向移動的距離大小對比,判斷是左右還是上下*/
			var ele = moveX > 0 ? "向右" : "向左";
			alert(ele);
		}else{
			var ele = moveY > 0 ? "向下" : "向上";
			alert(ele);
		}
	}
})

  

移動端判斷用戶滑動方向