7.touch.html 1002 B

123456789101112131415161718192021222324252627282930313233343536373839
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8. #box{
  9. width: 30vw;
  10. height: 30vh;
  11. background: plum;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <!--
  17. touch:
  18. click 200-300ms延迟
  19. -->
  20. <div id="box"></div>
  21. <input type="text">
  22. <script>
  23. var box = document.querySelector("#box");
  24. var input = document.querySelector("input");
  25. box.ontouchstart = function(event) {
  26. console.log("开始",event)
  27. }
  28. box.ontouchmove = function() {
  29. console.log("移动")
  30. }
  31. box.ontouchend = function() {
  32. console.log("离开")
  33. }
  34. input.onkeydown = function(event) {
  35. console.log("开始",event)
  36. }
  37. </script>
  38. </body>
  39. </html>