阻止事件默认行为和事件冒泡行为

1.阻止事件默认行为

• 事件的默认行为：如a标签的默认跳转行为，表单的默认提交行为。
• 假如我们想让a标签不跳转到href所对应的地址，假如我们想在表单提交前做一些操作怎么办呢。这个时候就要用到阻止事件默认行为。

HTML：

<a href="http://www.baidu123.com" class="a">百度</a>

Javascript：

    a.onclick = function (e) {
        // ie678中没有preventDefault这个方法，可以用下面的returnValue兼容
        e.preventDefault()
        e.returnValue = false
    }
    a.addEventListener("click", function (e) {
        // ie678中没有preventDefault这个方法，可以用下面的returnValue兼容
        e.preventDefault()
        e.returnValue=false
    })

• 不论是传统的事件绑定模式，还是通过addEventListener绑定事件的模式都可以使用事件对象的preventDefault（）方法和事件对象的returnValue=false这两种方法来阻止事件默认行为。returnValue和后文讲的return false不一样，不能同时阻止事件默认行为和事件冒泡行为。

阻止默认事件的第三种方式（仅适用于传统事件绑定方式）

Javascript：

    a.onclick = function (e) {
        //仅适用于这种传统的事件绑定，不适用与addEventListener和attachEvent事件绑定方式
        return false
    }

• 与上面两种取消默认事件的方式不同的是，这种方式仅适用于这种传统的事件绑定，不适用与addEventListener和attachEvent事件绑定方式。
• 看到网上有的人说return false可以同时取消默认行为和冒泡行为，但是对于这一点做实验发现是只能在Jquery中实现这个功能，在原生的JS中好像只能实现取消默认行为。最后提醒一点，能不用return false就不用，尽量用前面两种方式。

2.阻止事件冒泡行为

• 事件冒泡可以实现事件委托，但是有时候事件冒泡在实际开发过程中也会带来意向不到的坏处，所以有时候事件会冒泡到父元素及祖先元素身上带来一些影响，这个时候我们也要阻止冒泡。

HTML：

    <div class="parent">
        <div class="child">
        </div>
    </div>

CSS：

        .parent {
            width: 300px;
            height: 300px;
            background-color: #bfa;
        }

        .child {
            width: 200px;
            height: 200px;
            background-color: red;
        }

Javascript：

    child.onclick = function (event) {
        // 取消冒泡行为同样有兼容性,ie678中可以使用cancelbubble
        event.stopPropagation()
        event.cancelBubble=true
        console.log("I am child")

    }
    child.addEventListener("click", function (e) {
        // 取消冒泡行为同样有兼容性,ie678中可以使用cancelbubble
        event.stopPropagation()
        event.cancelBubble = true
        console.log("I am child")
    })
    parent.onclick = function (event) {
        console.log("I am parent")
    }

• 不论是传统的事件绑定模式，还是通过addEventListener绑定事件的模式都可以使用事件对象的stopProPagation（）方法和事件对象的cancelBubble=true这两种方法来阻止事件冒泡。
• 在JQuery中，也可以通过return false来实现取消事件冒泡。同时也要满足一点return false只能应用于原生的时间绑定方式身上。

阻止事件默认行为和冒泡行为