阻止冒泡,默认行为

阻止冒泡:

<style>
        #box {
            width: 200px;
            height: 200px;
           background-color: red;
        }

        #bigbox {
            width: 300px;
            height: 300px;
            background-color:  green;
        }
    </style>
    <div id="bigbox">
        <div id="box">
            <button id="btn">按钮</button>
        </div>
    </div>


    <script>
        var box = document.getElementById('box')
        var btn = document.getElementById('btn')
        btn.onclick = function (e) {

            e = e || window.event
            //阻止事件向上冒泡,stopPropagation方法可以阻止事件冒泡 且遵从w3c规则
            // e.stopPropagation()
            //ie浏览器的阻止事件冒泡    利用了一个属性cancelBubble  设置为true,也兼容但不遵从w3c规范
            //e.cancelBubble = true //取消冒泡
            if (e.stopPropagation) {
                e.stopPropagation()
            } else {
                e.cancelBubble = true
            }
            console.log('btn被点击了');
        }
        box.onclick = function () {
            console.log('box被点击了');
        }
        bigbox.onclick = function () {
            console.log('大box被点击了');
        }
        //在点击div里面的按钮时,会触发div的点击事件 事件冒上去了
        //在触发事件的时候
    </script>

阻止默认行为:

  <a href="http//www.baidu.com"></a>
    //a标签默认会跳转页面
    <script>
        document.getElementsByTagName('a')[0].onclick=function(){
            console.log('a点击了');
            //return false  阻止默认行为 遵从w3c,但ie9之前不兼容
            return false
            //ie兼容写法    其他浏览器也可以用
            e.preventDefault()//阻止默认事件
            //针对低版本浏览器
            e.returnValue=false
        }


    </script>