什么是冒泡:
以点击事件为例,就是点击一个子元素,同时也把这个元素的父元素的点击事件触发了。
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;来阻止冒泡。