7_事件.html 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  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: 400px;
  10. height: 400px;
  11. background-color: red;
  12. position: absolute;
  13. top:0;
  14. left: 0;
  15. }
  16. .div1{
  17. width: 200px;
  18. height: 200px;
  19. background-color: blue;
  20. position: absolute;
  21. top: 0;
  22. left: 0;
  23. z-index: 1;
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <div class="div1"></div>
  29. <div class="box"></div>
  30. <script>
  31. let oBox = document.querySelector(".box");
  32. let oDiv = document.querySelector(".div1");
  33. oBox.onclick = function(){
  34. console.log("click");
  35. }
  36. // oDiv.ontouchstart = function(){
  37. // console.log("ontouchstart")
  38. // }
  39. // oDiv.ontouchmove = function(){
  40. // console.log("ontouchmove");
  41. // }
  42. // oDiv.ontouchend = function(){
  43. // console.log("ontouchend");
  44. // }
  45. oDiv.ontouchstart = function(){
  46. console.log("ontouchstart");
  47. }
  48. </script>
  49. </body>
  50. </html>