在我们日常生活中,冒泡泡是很常见滴~比如,水里的一条鱼吐泡泡,卟噜卟噜,又如下图(注意观察龙王旁边~):
那么在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,就可以取消事件进行冒泡,也就达成了我们想要的结果。点击之后,只发生当前事件。
当然,万事并不是绝对的。并不是所有的冒泡事件都需要阻止,我们要按需所取~