場景:touch滑動有上,下,左,右四個方向,如何判斷其滑動的方向?ide
措施:1.根據移動的值正負來判斷spa
//滑動處理 var startX, startY, moveEndX, moveEndY, X, Y; mybody.addEventListener('touchstart', function(e) { e.preventDefault(); startX = e.touches[0].pageX; startY = e.touches[0].pageY; }, false); mybody.addEventListener('touchmove', function(e) { e.preventDefault(); moveEndX = e.changedTouches[0].pageX; moveEndY = e.changedTouches[0].pageY; X = moveEndX - startX; Y = moveEndY - startY; if ( Math.abs(X) > Math.abs(Y) && X > 0 ) { alert("向右"); } else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) { alert("向左"); } else if ( Math.abs(Y) > Math.abs(X) && Y > 0) { alert("向下"); }else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) { alert("向上"); } else{ alert("沒滑動"); } });
2.根據角度來判斷方向code
//返回角度 function GetSlideAngle(dx, dy) { return Math.atan2(dy, dx) * 180 / Math.PI; } //根據起點和終點返回方向 1:向上,2:向下,3:向左,4:向右,0:未滑動 function GetSlideDirection(startX, startY, endX, endY) { var dy = startY - endY; var dx = endX - startX; var result = 0; //若是滑動距離過短 if (Math.abs(dx) < 2 && Math.abs(dy) < 2) { return result; } var angle = GetSlideAngle(dx, dy); if (angle >= -45 && angle < 45) { result = 4; } else if (angle >= 45 && angle < 135) { result = 1; } else if (angle >= -135 && angle < -45) { result = 2; } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) { result = 3; } return result; } //滑動處理 var startX, startY; mybody.addEventListener('touchstart', function (ev) { ev.preventDefault(); startX = ev.touches[0].pageX; startY = ev.touches[0].pageY; }, false); mybody.addEventListener('touchmove', function (ev) { var endX, endY; ev.preventDefault(); endX = ev.changedTouches[0].pageX; endY = ev.changedTouches[0].pageY; var direction = GetSlideDirection(startX, startY, endX, endY); switch (direction) { case 0: alert("沒滑動"); break; case 1: alert("向上"); break; case 2: alert("向下"); break; case 3: alert("向左"); break; case 4: alert("向右"); break; default: } }, false);