jQuery冒泡事件

什么是冒泡事件：点击子div，会把父div的事件给触发

<html>

<head>
<title></title>
</head>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .father{
            width:200px;
            height:200px;
            background:red;
        }
        .father .son{
            width:100px;
            height:100px;
            background:blue;
        }
        
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        
        $(function(){
            $('.father').click(function(){                   //点击父div，只会弹father
                alert('father')
            })
        $('.father .son').click(function(event){             //点击子div，会弹son，然后再弹father
                alert('son')
                //return false                                //阻止冒泡事件的一种方法
                //event.stopPropagation();                    //阻止冒泡事件的另一种方法
            })
        })
        
    </script>
    
<body>
    <div class="father"> 
        <div class="son"></div>
    </div>
    
</body>
</html>

 

posted @ 2018-11-06 20:14  大C文  阅读(716)  评论(0)    收藏  举报