7_事件.html 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  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. oDiv.ontouchstart = function(){
  34. this.style.display = "none";
  35. }
  36. oBox.onclick = function(){
  37. console.log("click");
  38. }
  39. // oDiv.ontouchstart = function(){
  40. // console.log("click");
  41. // this.style.display = "none";
  42. // }
  43. // oDiv.ontouchstart = function(){
  44. // console.log("ontouchstart")
  45. // }
  46. // oDiv.ontouchmove = function(){
  47. // console.log("ontouchmove");
  48. // }
  49. // oDiv.ontouchend = function(){
  50. // console.log("ontouchend");
  51. // }
  52. // oBox.onclick = function(){
  53. // console.log("onclick");
  54. // }
  55. </script>
  56. </body>
  57. </html>