<!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>
575
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
