在我们日常生活中，冒泡泡是很常见滴~比如，水里的一条鱼吐泡泡，卟噜卟噜，又如下图（注意观察龙王旁边~）：
那么在js中呢，也有一种冒泡，叫做“事件冒泡”，由IE提出。是指当触发某个元素的某个事件时，它会触发自己的对应事件，然后，依次向上触发所有父级的相同事件，如果中间有父级没有相同事件，那么就继续向上触发。接下来，我们来看一个小例子~
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>事件冒泡</title> <style type="text/css"> .box1 { width: 400px; height: 400px; background-color: red; } .box2 { width: 300px; height: 300px; background-color: green; } .box3 { width: 200px; height: 200px; background-color: blue; } </style> </head> <body> <div class="box1"> <div class="box2"> <div class="box3"></div> </div> </div> </body> <script type="text/javascript"> var obox1 = document.querySelector(".box1"); var obox2 = document.querySelector(".box2"); var obox3 = document.querySelector(".box3"); obox1.onclick = function(eve) { var e = eve || window.event; // 兼容IE // 阻止事件冒泡 if (e.stoppropagation) { e.stopPropagation(); } else { e.cancelBubble = true; } alert("red"); } obox2.onclick = function(eve) { var e = eve || window.event; if (e.stoppropagation) { e.stopPropagation(); } else { e.cancelBubble = true; } alert("green"); } obox3.onclick = function(eve) { var e = eve || window.event; if (e.stoppropagation) { e.stopPropagation(); } else { e.cancelBubble = true; } alert("blue"); } </script> </html>
运行结果如下：
也就是当点击box3即蓝色方块时，会有一个弹出框显示【blue】，当点击【确定】之后，会继续弹出【green】，点击确定之后，又会弹出【red】。这就是一个简单的冒泡事件。方便理解的图如下：
然而，就像这种现象，可能并不是我们想要的，因为我们所想要的是一种行为只产生一种事件，那么我们就需要进行阻止事件冒泡。代码如下：
if (e.stoppropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
其中，.cancelBubble的默认值是false，也就是不取消冒泡，我们需要手动将值改为true，就可以取消事件进行冒泡，也就达成了我们想要的结果。点击之后，只发生当前事件。
当然，万事并不是绝对的。并不是所有的冒泡事件都需要阻止，我们要按需所取~