/touch滑屏事件

Posted xzzzys

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了/touch滑屏事件相关的知识,希望对你有一定的参考价值。

//touch滑屏事件

 

    var windowHeight = $(window).height(),
    $body = $("body");
    $body.css("height", windowHeight);

    $("body").on("touchstart", function(e) {
        e.preventDefault();
        startX = e.originalEvent.changedTouches[0].pageX,
                startY = e.originalEvent.changedTouches[0].pageY;
    });
    $("body").on("touchmove", function(e) {
        e.preventDefault();
        moveEndX = e.originalEvent.changedTouches[0].pageX,
                moveEndY = e.originalEvent.changedTouches[0].pageY,
                X = moveEndX - startX,
                Y = moveEndY - startY;

        if ( Math.abs(X) > Math.abs(Y) && X > 10 ) {
            alert("left 2 right");
        }
        else if ( Math.abs(X) > Math.abs(Y) && X < 10 ) {
            alert("right 2 left");
        }
        else if ( Math.abs(Y) > Math.abs(X) && Y > 10) {
            alert("top 2 bottom");
        }
        else if ( Math.abs(Y) > Math.abs(X) && Y < 10 ) {
            alert("bottom 2 top");
        }
        else{
            alert("just touch");
        }
    });

以上是关于/touch滑屏事件的主要内容,如果未能解决你的问题,请参考以下文章

H5案例分享:移动端滑屏 touch事件

移动端touch滑屏事件

H5案例分享:移动端touch事件判断滑屏手势的方向

移动端事件——移动端滑屏切换的幻灯片

javascript怎么禁用UC浏览器的“左右滑屏前进后退”功能,和我的touchmove事件冲突了

HTML在移动端页面设计是touch事件注意事项