关于js冒泡的一些玩意儿 - 一些乱八七糟的小记录

什么是冒泡：
以点击事件为例，就是点击一个子元素，同时也把这个元素的父元素的点击事件触发了。
Linke this：

<div id="outer">
    <div id="inter"></div>
</div>
//JS：
$("#outer").click(function(){
    alert("outer");
})
$("#inter").click(function(){
    alert("inter");
})

上面的代码中,点击"#inter",会先弹出"inter",紧接着会弹出"outer".
为什么我点击子元素“#inter”的事件却会触发父元素的事件？
这就是冒泡了，点击子元素，同时会触发父元素的事件。

是不是理解起来 So Easy 啦 ^.^

如何阻止冒泡：
要阻止冒泡，就要用到event.stopPropagation()方法：

//HTML：
<div id="outer">
    <div id="inter"></div>
</div>
//JS：
$("#outer").click(function(){
    alert("outer");
})
$("#inter").click(function(event){
    event.stopPropagation()
    alert("inter");
})

在点击子元素的事件上添加event.stopPropagation()方法，就能阻止向父元素冒泡。

================= 万恶的分割线 ===================

当然以上是正常情况，作为一个苦逼的前端开发，都知道有个特例的，那就是万恶的IE；
那么IE怎么处理呢。。。。

function show1(e){
        var ev = e || window.event;
        if (ev.stopPropagation) {
            ev.stopPropagation();
        }
        else if (window.event) {//IE
            window.event.cancelBubble = true;//IE
        }
}

window.event是IE中的属性，如果是IE，就执行window.event.cancelBubble = true;来阻止冒泡。