移动端touch事件判断滑屏手势的方向

1、当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY;

2、当触发touchmove事件时,在获取此时手指的横坐标moveEndX和纵坐标moveEndY;最后,通过这两次获取的坐标差值来判断手指在手机屏幕上的滑动方向。

3、用touchmove的最后坐标减去touchstart的起始坐标,X的结果如果正数,则说明手指是从左往右划动;X的结果如果负数,则说明手指是从右往左划动;Y的结果如果正数,则说明手指是从上往下划动;Y的结果如果负数,则说明手指是从下往上划动。

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

var h = document.documentElement.clientHeight;

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

//滑动处理

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("没滑动");

    }

});

你可能感兴趣的:(移动端touch事件判断滑屏手势的方向)