美文网首页
移动端判断滑动方向(上下左右)

移动端判断滑动方向(上下左右)

作者: 温文尔雅momo | 来源:发表于2018-12-06 15:06 被阅读0次

    <script>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 ) {// right

            alert('向右');

        }

        else if( Math.abs(X) > Math.abs(Y) && X < 0 ) {// left

            alert('向左');

        }

        else if( Math.abs(Y) > Math.abs(X) && Y > 0) {// down

            alert('向下');

        }

        else if( Math.abs(Y) > Math.abs(X) && Y < 0 ) {// up

            alert('向上');

        }

        else{//没有发生滑动

            alert('没有发生滑动');

        }

    });

    原来链接:https://www.imooc.com/article/17600

    相关文章

      网友评论

          本文标题:移动端判断滑动方向(上下左右)

          本文链接:https://www.haomeiwen.com/subject/ysjocqtx.html