Be a Pure Person, Enjoy a Simple Life

04月 11

关于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;来阻止冒泡。

标签:none

还不快抢沙发

添加新评论