阻止事件冒泡 兼容ie低配版

<style>
    .a{
        width: 300px;
        height: 300px;
        background-color: #f00;
    }
    .a p {
        width: 200px;
        height: 200px;
        background-color: #000;
    }
    .a p span{
        width: 100px;
        height: 100px;
        display: block;
        background-color: pink;
    }
</style>

<div class="a">
    <p>
        <span></span>
    </p>
</div>


<script>

    // 阻止事件冒泡
    //    利用事件对象
    //       e.stopPropagation()
    //       e.cancelBubble = true


    var oDiv = document.querySelector('.a')
    var oP = document.querySelector('p') ;
    var oSpan = document.querySelector('span')

    oDiv.onclick = function () {  
        console.log('div');
    }

    oP.onclick = function (e) {  
        e = e || event ;
        // 阻止事件冒泡
        // 主流浏览器的写法
        // e.stopPropagation()
        // 低版本IE取消事件冒泡的方法
        // e.cancelBubble = true ;
        if(e.stopPropagation) {
            e.stopPropagation()
        } else {
            e.cancelBubble = true ;
        }
        console.log('p');
    }
   


   
</script>