事件冒泡是指在子元素和父元素（或更高层级）拥有相同事件的情况下，如果触发了子事件，会导致父元素或以上层级的元素里的相同事件都被触发，顺序为顺着DOM树往上触发，这种情况称为冒泡。有时候会提前触发我们并不想现在触发的事件。下为示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{background: violet;width: 100px;height: 100px;}
#one{background: lightseagreen;width: 100px;height: 20px;}
</style>
</head>
<body>
<div id="box">
<div id="one">
</div>
</div>
</body>
<script type="text/javascript">
var obox=document.getElementById("box");
var oone=document.getElementById("one");
oone
.
onclick=function
(
){
alert(1);
}
obox
.
onclick=function
(
){
alert(2);
}
document
.
onclick=function
(){
alert(3);
}
</script>
</html>
若点击one的区域，将按顺序弹出‘1’，‘2’，‘3’。若点击box区域，则弹出‘2’，‘3‘。
只需在函数内加入cancelBubble函数即可，具体如下：
oone
.
onclick=function
(
ev
){
alert(1);
var
oevent=ev||event;
oevent.cancelBubble=true;
}
ev为参数，在IE兼容，event则兼容非IE。英语好的同学直接字面理解即可，‘事件’ ‘取消泡泡’ 等于 ‘真’。
扫一扫
964
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
