js移动端的滑动事件

wanghjun 2022-01-02 原文

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>touch event</title>
        <style type="text/css" media="screen">
.spirit {             
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: red;
    -webkit-border-radius: 25px;
}
.page {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}

        </style>
    </head>
    <body style="margin:0;padding:0;background:#ccc;">

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script type="text/javascript">
            var windowHeight = $(window).height(),
                $body = $("body");
            $body.css("height", windowHeight);
            var startX, startY, moveEndX, moveEndY, X, Y;

$("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 > 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("触摸");
    }
});
        </script>
    </body>
</html>