JavaScript--阻止事件冒泡stopPropagation和cancelBubble

  1 <!DOCTYPE html>
  2 <html lang="en" xmlns="http://www.w3.org/1999/html">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         #yeye{
  8              500px;
  9             height: 500px;
 10             background-color: #f24b4b;
 11         }
 12         #baba{
 13              400px;
 14             height: 400px;
 15             background-color: #44c28d;
 16         }
 17         #erzi{
 18              300px;
 19             height: 300px;
 20             background-color: #6e8cd5;
 21         }
 22     </style>
 23     <script>
 24     window.onload = function () {
 25 
 26     /**
 27     *
 28     *
 29     *    事件捕获：
 30     *       浏览器就好像盲人一样，要找某个元素，其实挨个挨个问的方式去找
 31     *          这个过程我们叫事件的捕获过程.
 32     *          //  从外到里，直到找到目标
 33     *
 34     *    事件冒泡：
 35     *       找到到目标后，其实还有一个回馈的过程，逐级往上传播
 36     *          这个过程我们叫事件的冒泡过程.
 37     *          //  从里到外，直到传到window
 38     *
 39     *        注意：
 40     *            我们一般都是事件冒泡的方式注册事件的
 41     *
 42     *
 43     *   事件的三个阶段
 44 
 45     1. 捕获阶段
 46     2. 当前目标阶段
 47     3. 冒泡阶段
 48     事件对象.eventPhase属性可以查看事件触发时所处的阶段
 49 
 50     *
 51     * */
 52 
 53     var yeye = document.getElementById("yeye");
 54     var baba = document.getElementById("baba");
 55     var erzi = document.getElementById("erzi");
 56 
 57     erzi.onclick = function (event) {
 58         event = event || window.event;
 59         if(event.stopPropagation) {
 60             // ie9+ 其余全支持
 61             event.stopPropagation();
 62         }else{
 63             // 全部兼容 兼容ie8
 64             event.cancelBubble = true;
 65         }
 66         console.log("儿子", event);
 67     }
 68     baba.onclick = function (event) {
 69         event = event || window.event;
 70         if(event.stopPropagation) {
 71             // ie9+ 其余全支持
 72             event.stopPropagation();
 73         }else{
 74             // 全部兼容 兼容ie的
 75             event.cancelBubble = true;
 76         }
 77         console.log("爸爸", event);
 78     }
 79     yeye.onclick = function (event) {
 80         event = event || window.event;
 81         if(event.stopPropagation) {
 82             // ie9+ 其余全支持
 83             event.stopPropagation();
 84         }else{
 85             // 全部兼容
 86             event.cancelBubble = true;
 87         }
 88         console.log("爷爷", event);
 89     }
 90     }
 91 </script>
 92 </head>
 93 <body>
 94 <div id="yeye">
 95     <div id="baba">
 96         <div id="erzi"></div>
 97     </div>
 98 </div>
 99 </body>
100 </html>