如何判斷touch事件滑動的方向?

場景: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);
相關文章
相關標籤/搜索