<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box1{
                height: 400px;
                width: 400px;
                background-color: lightblue;
            }
            
            .box2{
                height: 200px;
                width: 200px;
                background-color: hotpink;
            }
            
        </style>
        <script type="text/javascript">
            window.onload = function(){
                document.querySelector(".box1").onclick = function(){
                    alert("父元素");
                }
                
                document.querySelector(".box2").onclick = function(event){
                    event = event || window.event;
                    // 取消冒泡
                    event.cancelBubble = true;
                    alert("子元素");
                }
            }
        </script>
    </head>
    <body>
        <div class="box1">
            <div class="box2"></div>
        </div>
    </body>
</html>
posted on 2021-09-05 19:08 leiyanting 阅读(167) 评论(0) 收藏举报
刷新页面返回顶部
导航
