如下图所示，灰色块包含红色块，假设我们为灰色和红色块各绑定一个单击弹框事件，当我们点击红色块时，不希望触发灰色块的弹框事件，这就需要阻止冒泡事件了。
IE里阻止冒泡事件使用cancelBubble属性，如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。
火狐等非IE浏览器阻止冒泡事件使用stopPropagation()方法。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。
我们看代码实例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件对象--阻止事件冒泡</title>
</head>
<body>
<div id="gray" style="background:#ddd;width:400px;height:400px;">
<div id="red" style="background:#FF0000;width:200px;height:200px;"></div>
</div>
<script>
var oGray=document.getElementById("gray");
var oRed=document.getElementById("red");
oGray.onclick=function(){
alert("点击了灰色块！");
}
oRed.onclick=function(e){
alert("点击了红色块！");
var event=e||window.event;
//阻止冒泡事件,否则会触法oGray.onclick方法
if(document.all){
//IE
event.cancelBubble=true;//如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true
}else{
//FF,Chrome
event.stopPropagation();//不再派发事件
}
}
</script>
</body>
</html>