js移动端的滑动事件
https://www.cnblogs.com/wanghjun/p/9121749.html
doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>touch eventtitle>
<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("触摸");
}
});
body>
html>