案例：事件冒泡

<style>
        .no1 {
            width: 600px;
            height: 600px;
            border: 1px solid red;
            margin-left: 20px;
        }

        .no2 {
            width: 450px;
            height: 450px;
            border: 1px solid green;
            margin-left: 20px;
        }

        .no3 {
            width: 200px;
            height: 200px;
            border: 1px solid blue;
            margin-left: 20px;
        }
    </style>

<div class="no1" onclick="show1()">
        1一
        <div class="no2" onclick="show2()">
            2二
            <div class="no3" onclick="show3()">
                3三
            </div>
        </div>
    </div>

<script>
        function show1(e) {
            console.log("show1");
            var myEvent = e || event ;
            if (myEvent.stopPropagation) {  //调用stopPropagation就可以阻止时间冒泡
                myEvent.stopPropagation() ;
            }else{
                myEvent.cancelBubble = true ;   //兼容IE
            }
        }

        function show2(e) {
            console.log("show2");
            var myEvent = e || event ;
            if (myEvent.stopPropagation) {  //调用stopPropagation就可以阻止cdff
                myEvent.stopPropagation() ;
            }else{
                myEvent.cancelBubble = true ;   //兼容IE
            }
        }

        function show3(e) {  //e默认对象
            console.log("show3");
            var myEvent = e || event ;
            if (myEvent.stopPropagation) {  //调用stopPropagation就可以阻止时间冒泡
                myEvent.stopPropagation() ;
            }else{
                myEvent.cancelBubble = true ;   //兼容IE
            }
        }
    </script>