事件冒泡 | 易学教程

在我们日常生活中，冒泡泡是很常见滴~比如，水里的一条鱼吐泡泡，卟噜卟噜，又如下图（注意观察龙王旁边~）：

那么在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，就可以取消事件进行冒泡，也就达成了我们想要的结果。点击之后，只发生当前事件。

当然，万事并不是绝对的。并不是所有的冒泡事件都需要阻止，我们要按需所取~

来源：https://www.cnblogs.com/weimingmei/p/11417232.html

标签

阻止冒泡