事件的冒泡

什么是事件的冒泡

事件的冒泡是指，父子元素同时监听同一个事件，当触发子元素的事件的同时，同一个事件也被传递到了父元素的事件里去了。

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <style>
        span{
            width:100px;
            border: 1px solid blue;
            background: red;
            margin:10px;
        }
        div{
            width:200px;
            height:100px;
            border:1px solid green;
            background: green;
        }
    </style>
    <!--引入jQuery库-->
    <script type="text/javascript" src="../lib/jquery-1.7.2.js"></script>
    <script type="text/javascript">
      
    $(function(){
        $("div").click(function(){
            alert("haha");
        });
        $("span").click(function(){
            alert("xixi");
        });
    });
    </script>
    </head>
    <body>
        <div>
            外层div<br>
            <span>内层span</span>  <br>
            外层div
        </div>
    </body>
</html>

如果想阻止事件冒泡，就在子元素的绑定事件函数中加入return false。

posted @ 2021-04-26 20:12  ice--cream  阅读(67)  评论(0)  编辑  收藏  举报