事件冒泡

作者: 冰点雨 | 来源:发表于2022-07-18 10:55 被阅读0次

微信小程序中bind和catch的区别
事件绑定和方法传值
wepy基础知识
微信小程序 WXML事件 WXML冒泡事件列表
小程序冒泡事件
什么是事件冒泡/捕获？
小程序中点击子元素事件而不触发父元素的点击事件
vue中的事件
JavaScript中的冒泡事件
阻止事件冒泡

事件冒泡
冒泡指的是事件向上传递，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
——开发中大部分情况冒泡都是有用的，如果不希望发生冒泡，就通过对象来取消冒泡

取消冒泡

// 取消冒泡  cancelBubble设置为true
                event.cancelBubble = true;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>冒泡</title>

    <style>
        #box1{
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
        }

        #s1{
            background-color: yellow;
        }
    </style>
    <script>
        window.onload = function(){
            /* 
            事件冒泡
            冒泡指的是事件向上传递，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
            ——开发中大部分情况冒泡都是有用的，如果不希望发生冒泡，就通过对象来取消冒泡
             */
            var s1 = document.getElementById("s1");
            s1.onclick = function(event){
                event = event || window.event;
                alert("span单机事件");

                // 取消冒泡  cancelBubble设置为true
                event.cancelBubble = true;
            }

            var box1 = document.getElementById("box1");
            box1.onclick = function(event){
                event = event || window.event;
                alert("div单机事件");

                // 取消冒泡  cancelBubble设置为true
                event.cancelBubble = true;
            }

            var body = document.body;
            body.onclick = function(event){
                event = event || window.event;
                alert("body单机事件");
            }
        }
    </script>
</head>
<body>
    <div id="box1">
        我是box1
        <span id="s1">我是span</span>
    </div>
    
</body>
</html>