JQuery 关闭事件冒泡 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>event_stop_propagation_事件_停止_传播</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){

            //event 是自带对象, 需要使用的时候,通过function()第一个传入.
            $('.son').click(function(event){
                alert(1);

                event.stopPropagation();
                // 使用event对象中的stopPropagation(停止传播),可以关闭事件冒泡.

                // event.stopDefault();
                // 关闭默认行为

                // 通常.event.stopPropagation 与 event.stopDefault
                // 连写为 return false;

            })
            $('.father').click(function(){
                alert(2)
            })
            $('.grandfather').click(function(){
                alert(3)
                return false;
            })

            $(document).click(function(){
                alert(4)
            })



        })


    </script>
    <style type="text/css">
        
        .grandfather{
            width: 300px;
            height: 300px;
            position: relative;
            background-color: tan;
        }
        .father{
            width: 200px;
            height: 200px;
            background-color: cyan;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: violet;
            position: absolute;
            top: 350px;
        }


    </style>
</head>
<body>
    <div class="grandfather">
        <div class="father">
            <div class="son"></div>
        </div>
    </div>
</body>
</html>

 

posted @ 2019-08-13 20:30  Jrri  阅读(500)  评论(0)    收藏  举报