example10.html 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style>
  7. #one {
  8. width: 400px;
  9. height: 400px;
  10. background-color: red;
  11. }
  12. #two {
  13. width: 300px;
  14. height: 300px;
  15. background-color: green;
  16. }
  17. #three {
  18. width: 200px;
  19. height: 200px;
  20. background-color: blue;
  21. }
  22. #two, #three {
  23. position: relative;
  24. left: 50px;
  25. top: 50px;
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. <div id="container">
  31. <div id="one">
  32. <div id="two">
  33. <div id="three"></div>
  34. </div>
  35. </div>
  36. </div>
  37. <script src="js/common.js"></script>
  38. <script>
  39. (function() {
  40. var one = document.getElementById("one");
  41. var two = document.getElementById("two");
  42. var three = document.getElementById("three");
  43. bind(one, "click", function() {
  44. alert("one");
  45. });
  46. bind(two, "click", function() {
  47. alert("two");
  48. });
  49. bind(three, "click", function(evt) {
  50. if (evt.stopPropagation) {
  51. evt.stopPropagation();
  52. } else {
  53. evt.cancelBubble = true;
  54. }
  55. alert("three");
  56. });
  57. })();
  58. </script>
  59. </body>
  60. </html>