JS事件冒泡

    <style>
        /* 文章：https://www.cnblogs.com/moqing/p/5590216.html */

        /* #div1{
            background-color: pink;
            height: 200px;
            width: 200px;
        }
        #div2 {
            background-color: red;
            height:100px;
            width: 100px;
        } */

        /* 实例2 */
        /* #div1{
            background-color: pink;
            top: 200px;
            height: 200px;
            width: 200px;
            position: absolute;
        }
        #div2 {
            position: absolute;
            top: -100px;
            background-color: red;
            height:100px;
            width: 200px;
        }  */

        /* 实例3 */
        #div1{
            background-color: pink;
            /* top: -100px; */
            height: 100px;
            width: 200px;
            position: absolute;
        }
        #div2 {
            position: absolute;
            /* top: -100px; */
            background-color: red;
            height:100px;
            width: 200px;
        }
        #div3 {
            background-color: pink;
            top: 100px;
            height: 200px;
            width: 200px;
            position: absolute;
        } 

        
    </style>

    <div id="div1">
        <div id="div2">点击我让下面的div显示，点击其它文档隐藏</div>
    </div>
    <div id="div3">粉丝面板</div>
    <script>
        // 点击的时候，不仅div2的事件被触发了，它的父级的点击事件也触发了，这种现象就叫做冒泡。
        var div2 = document.getElementById("div2");
        var div1 = document.getElementById("div1");
        var div3 = document.getElementById("div3");
        // div1.onclick= function(){alert("1")}
        // div2.onclick= function(){alert("2")}

         /* 实例3 */
        //  div2.onclick= function(){
        //     div3.style.display="block"
        //  }
        //  document.onclick = function(){
        //     div3.style.display = "none"
        //  }

        /* 实例4 */
        div2.onclick=function(ev){
            div3.style.display="block"
            stopBunble(ev)
        }
        document.onclick = function(){
            div3.style.display = "none"
         }

         function stopBunble(e){
            if(e && e.stopPropagation)
                e.stopPropagation()
            else
            window.event.cancelBubble = true
         }


    </script>

原文：https://www.cnblogs.com/moqing/p/5590216.html