- 2022.03.28 Monday
- スポンサーサイト
-
一定期間更新がないため広告を表示しています
- | スポンサードリンク | - | | - | - | pookmark |
- 2012.01.05 Thursday
- iPhoneのFlickをaddEventListenerで取得する。
-
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>flick</title> <meta name="viewport" content="width=device-width, maximum-scale=0.6667" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> #idbox { border: 1px solid black; height: 300px; width: 100%; } #idmsg { width: 100%; text-align: center; } </style> </head> <body> <div id="idbox">555</div> <div id="idmsg"></div> <script type="text/javascript"> function aaa(){ alert('aaa!'); } var box = document.getElementById("idbox") box.innerHTML="ここをタッチ"; box.style.backgroundColor="#0077aa"; box.addEventListener("touchstart", touchHandler, false); box.addEventListener("touchmove", touchHandler, false); box.addEventListener("touchend", touchHandler, false); // box.addEventListener('click', aaa, false); function touchHandler(e) { //alert("タッチしたよ!") e.preventDefault(); var msg = document.getElementById("idmsg") var touch = e.touches[0]; if (e.type == "touchstart") { startX = touch.pageX; msg.innerHTML="デフォルト"; } else if (e.type == "touchmove") { diffX = touch.pageX - startX; } else if (e.type == "touchend") { if (diffX > 100) { msg.innerHTML="右方向へフリック!(" + diffX + ")"; } else if (diffX < -100) { msg.innerHTML="左方向へフリック!(" + diffX + ")"; } } } </script> </body> </html>
jQueryに依存しない状態 - | whaison | iPhoneSite | 20:03 | comments(0) | trackbacks(0) | pookmark |