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

 <!DOCTYPE html>
 <html lang="en" xmlns="http://www.w3.org/1999/html">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         #yeye{
             width: 500px;
             height: 500px;
             background-color: #f24b4b;
         }
         #baba{
             width: 400px;
             height: 400px;
             background-color: #44c28d;
         }
         #erzi{
             width: 300px;
             height: 300px;
             background-color: #6e8cd5;
         }
     </style>
     <script>
     window.onload = function () {

     /**
     *
     *
     *    事件捕获：
     *       浏览器就好像盲人一样，要找某个元素，其实挨个挨个问的方式去找
     *          这个过程我们叫事件的捕获过程.
     *          //  从外到里，直到找到目标
     *
     *    事件冒泡：
     *       找到到目标后，其实还有一个回馈的过程，逐级往上传播
     *          这个过程我们叫事件的冒泡过程.
     *          //  从里到外，直到传到window
     *
     *        注意：
     *            我们一般都是事件冒泡的方式注册事件的
     *
     *
     *   事件的三个阶段

     1. 捕获阶段
     2. 当前目标阶段
     3. 冒泡阶段
     事件对象.eventPhase属性可以查看事件触发时所处的阶段

     *
     * */

     var yeye = document.getElementById("yeye");
     var baba = document.getElementById("baba");
     var erzi = document.getElementById("erzi");

     erzi.onclick = function (event) {
         event = event || window.event;
         if(event.stopPropagation) {
             // ie9+ 其余全支持
             event.stopPropagation();
         }else{
             // 全部兼容 兼容ie8
             event.cancelBubble = true;
         }
         console.log("儿子", event);
     }
     baba.onclick = function (event) {
         event = event || window.event;
         if(event.stopPropagation) {
             // ie9+ 其余全支持
             event.stopPropagation();
         }else{
             // 全部兼容 兼容ie的
             event.cancelBubble = true;
         }
         console.log("爸爸", event);
     }
     yeye.onclick = function (event) {
         event = event || window.event;
         if(event.stopPropagation) {
             // ie9+ 其余全支持
             event.stopPropagation();
         }else{
             // 全部兼容
             event.cancelBubble = true;
         }
         console.log("爷爷", event);
     }
     }
 </script>
 </head>
 <body>
 <div id="yeye">
     <div id="baba">
         <div id="erzi"></div>
     </div>
 </div>
 </body>
 </html>