JS中阻止事件冒泡的两种方法：cancelBubble与stopPropagation

什么是事件冒泡

所谓冒泡事件，是指在存在嵌套关系的多个DOM元素（如父子级div）中，当子元素和父元素都绑定了点击事件时，点击子元素触发其对应JS操作后，事件会向上传递并触发父元素的点击事件。这种多层级的事件并发触发会导致页面行为混乱，这种现象被称为事件冒泡。

阻止冒泡的方法

要消除这种冒泡现象，需要阻止JavaScript事件的冒泡传递。主要涉及两个属性或方法：cancelBubble和stopPropagation。

下面的代码示例清晰地展示了什么是事件冒泡效果，以及如何通过代码实现消除冒泡的效果。

<html>
<head>
<title> 阻止JavaScript事件冒泡传递（cancelBubble 、stopPropagation）</title>
<meta name="keywords" content="JavaScript,事件冒泡,cancelBubble,stopPropagation" />
<script type="text/javascript">
function doSomething (obj,evt) {
alert(obj.id);
var e=(evt)?evt:window.event; //判断浏览器的类型，在基于ie内核的浏览器中的使用cancelBubble
if (window.event) {
e.cancelBubble=true;
} else {
//e.preventDefault(); //在基于firefox内核的浏览器中支持做法stopPropagation
e.stopPropagation();
} 
} 
</script>
</head>
<body>
<div id="parent1" onclick="alert(this.id)" style="width:250px;background-color:yellow">
<p>This is parent1 div.</p>
<div id="child1" onclick="alert(this.id)" style="width:200px;background-color:orange">
<p>This is child1.</p>
</div>
<p>This is parent1 div.</p>
</div>
<br />
<div id="parent2" onclick="alert(this.id)" style="width:250px;background-color:cyan;">
<p>This is parent2 div.</p>
<div id="child2" onclick="doSomething(this,event);" style="width:200px;background-color:lightblue;">
<p>This is child2. Will bubble.</p>
</div>
<p>This is parent2 div.</p>
</div>
</body>
</html>

将上述代码复制并运行，当点击id为child1的元素时，不仅会弹出child1的对话框，还会继续向上触发并弹出parent1的对话框。

这就是典型的事件冒泡现象。

然而，当点击id为child2的元素时，只会弹出child2的对话框，而不会触发parent2的点击事件。这是因为在doSomething函数中应用了阻止冒泡的逻辑，从而实现了消除冒泡的效果。