10
0

22_DOM阻止事件机制.html 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  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. position: fixed;
  10. top:0;
  11. left: 0;
  12. right: 0;
  13. bottom: 0;
  14. background-color: rgba(0,0,0,.5);
  15. }
  16. .box2{
  17. width: 200px;
  18. height: 200px;
  19. background-color: #fff;
  20. position: absolute;
  21. top: 50%;
  22. left: 50%;
  23. margin-top: -100px;
  24. margin-left: -100px;
  25. }
  26. </style>
  27. </head>
  28. <body>
  29. <div class="box">
  30. <div class="box2"></div>
  31. </div>
  32. <script>
  33. var oBox = document.getElementsByClassName("box")[0];
  34. var oBox2 = document.getElementsByClassName("box2")[0];
  35. oBox.onclick = function(){
  36. this.style.display = "none";
  37. }
  38. oBox2.onclick = function(e){
  39. this.innerText = "hello";
  40. // 他会阻止冒泡事件
  41. e.stopPropagation();
  42. }
  43. </script>
  44. </body>
  45. </html>