JS事件冒泡之cancelBubble和stoppropagation

最新推荐文章于 2024-06-20 07:32:02 发布

sai小懒

最新推荐文章于 2024-06-20 07:32:02 发布

阅读量1k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_44731369/article/details/107235954

版权

JavaScript 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

什么是事件冒泡？
在一个对象上绑定了某类事件 (如：onclick)，事件冒泡就是从当前触发的事件，由里到外，逐渐向父级对象传播，直到document为止。

其实stopPropagation的作用跟cancelBubble是一样的，都是用来阻止浏览器默认的事件冒泡行为。
不同之处在于：
（1）stopPropagation符合W3C标准，适用于FireFox等浏览器，不支持IE
（2）cancelBubble方法不符合W3C标准，只支持IE浏览
所以，很多时候我们都需要结合起来使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #red{
            width: 20%;
            height: 200px;
            background: red;
        }
        #blue{
            width: 50%;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <div id="red">
        <div id="blue"></div>
    </div>

    <script>
        var red = document.getElementById("red");
        var blue = document.getElementById("blue");
        red.onclick = function(){
            console.log("red");
        }
        blue.onclick = function(e){
            console.log("blue");
            // 阻止冒泡<1>
            var evt = e || event;
            evt.cancelBubble = true;
            // 阻止冒泡<2>
            evt.stopPropagation();
        }
    </script>
</body>
</html>

在这里插入图片描述
不阻止事件冒泡，当点击蓝色方块时，事件会由里到外传播（由蓝色方块传播到红色方块）
阻止事件冒泡后，点击蓝色方块不会进行传播，从而激发红色方块事件

在这里插入图片描述

sai小懒

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS事件冒泡之cancelBubble和stoppropagation

什么是事件冒泡？在一个对象上绑定了某类事件 (如：onclick)，事件冒泡就是从当前触发的事件，由里到外，逐渐向父级对象传播，直到document为止。其实stopPropagation的作用跟cancelBubble是一样的，都是用来阻止浏览器默认的事件冒泡行为。不同之处在于：（1）stopPropagation符合W3C标准，适用于FireFox等浏览器，不支持IE（2）cancelBubble方法不符合W3C标准，只支持IE浏览所以，很多时候我们都需要结合起来使用。<!DOCTY
复制链接

扫一扫

专栏目录