<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Touch</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
</head>
<body>
<div id="output" style="min-height:300px;overflow: auto;background: lightblue;">
</div>
<script type="text/javascript">
(function() {
var output = document.getElementById("output");
var a, b;
function handleTouchEvent(event) {
if (event.touches.length == 1) {
switch (event.type) {
case "touchstart":
//event.preventDefault(); //防止 touchend 不生效，貌似没用
output.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
a = event.touches[0].clientY;
break;
case "touchend":
output.innerHTML += "<br>Touch ended (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
break;
case "touchmove":
//event.preventDefault(); //prevent scrolling
output.innerHTML += "<br>Touch moved (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
b = event.touches[0].clientY;
if ((a - b) > 20) {
alert('boom'); //模拟向上滑动
}
break;
}
} else if (event.touches.length == 0) {
//chrome touchend 不生效，用 event.touches.length == 0 模拟 touchend
output.innerHTML += "<br>Touch ended (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
}
}
output.addEventListener("touchstart", handleTouchEvent, false);
output.addEventListener("touchend", handleTouchEvent, false);
output.addEventListener("touchmove", handleTouchEvent, false);
})();
</script>
</body>
</html>
