H5案例分享：移動端touch事件判斷滑屏手勢的方向

移動端touch事件判斷滑屏手勢的方向

方法一

1. 當開始一個touchstart事件的時候，獲取此刻手指的橫座標startX和縱座標startY；
2. 當觸發touchmove事件時，在獲取此時手指的橫座標moveEndX和縱座標moveEndY;最後，經過這兩次獲取的座標差值來判斷手指在手機屏幕上的滑動方向。

思路：用touchmove的最後座標減去touchstart的起始座標，X的結果若是正數，則說明手指是從左往右划動；X的結果若是負數，則說明手指是從右往左划動；Y的結果若是正數，則說明手指是從上往下划動；Y的結果若是負數，則說明手指是從下往上划動。

具體代碼以下：

var mybody = document.getElementsByTagName('body')[0];

   

    //滑動處理

    var startX, startY, moveEndX, moveEndY, X, Y;   

    mybody.addEventListener('touchstart', function(e) {

        e.preventDefault();

        startX = e.touches[0].pageX;

        startY = e.touches[0].pageY;

    });

    mybody.addEventListener('touchmove', function(e) {

        e.preventDefault();

        moveEndX = e.changedTouches[0].pageX;

        moveEndY = e.changedTouches[0].pageY;

        X = moveEndX - startX;

        Y = moveEndY - startY;

        if ( X > 0 ) {alert(‘向右’);}

        else if ( X < 0 ) {alert(‘向左’);}

        else if ( Y > 0) {alert(‘向下’);}

        else if ( Y < 0 ) { alert(‘向上’);}

        else{alert(‘沒滑動’); }

    });

然而在實際的操做中，手指的上下滑動很難作到直上直下，只要稍微有點斜，只要稍微有點斜，就會被X軸的判斷先行接管，而與咱們實際的操做意願相背離。此時就須要添加特殊的判斷技巧，修改代碼以下：

var mybody = document.getElementsByTagName('body')[0];

   

    //滑動處理

    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("沒滑動");

        }

    });

以上代碼，在測試時仍不能達到預期的效果，由於還有一個問題——body的元素的高仔細查查，發現其值是0；
故還應該在此基礎上添加如下代碼：

var mybody = document.getElementsByTagName('body')[0];

    var h = document.documentElement.clientHeight;

        mybody.style.height = h + 'px';

到此，已實現了手機移動端手指的上滑、下滑、左滑和右滑操做。

方法二

一、滑動屏幕事件使用HTML5中的touchstart滑動開始事件和touchmove滑動結束事件。

二、方向的判斷：以起點作平面座標系，與終點連線作直線，直線與x正半軸計算角度；咱們以45度角爲方向分割線，如：只要滑動角度大於等於45度且小於135度，則判斷它方向爲向上滑。如圖所示：

三、使用Math.atan2來計算起點與終點造成的直線角度。

注意：標準座標系與屏幕座標系並不相同，在屏幕座標系中，上半軸爲負值，要實現轉換，只須要調換Y座標起點與終於位置便可。

代碼以下：

var h = document.documentElement.clientHeight,

          mybody = document.getElementsByTagName('body')[0];

          mybody.style.height = h + 'px';

 

 

        //返回角度

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

PS：用touchmove事件獲取終點座標，而不是用touchend事件，是由於當你只是點擊屏幕的時候，就會觸發touchEnd事件，可是不會觸發touchMove事件。這樣會形成touchEnd中取得的endX，從而形成endY值不許確。好比先滑動再點擊，可能一樣會觸發滑動事件。

另外此代碼只是提供了判斷滑屏方向的思路，還須要根據具體的項目需求進行修改完善！

轉自：https://www.cnblogs.com/yangmengsheng/p/5973487.html