jQuery阻止事件冒泡 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.1.1.js"></script>
</head>
<body>
<div id="content">
    外层div元素
    <span>内层span元素</span>
    外层div元素
</div>
<div id="msg"></div>
<script>
    $(function(){
        //为span元素绑定click事件
        $("span").bind("click",function(event){//event:事件对象
            var txt=$("#msg").html()+"<p>内层span元素被单击</p>";
            $("#msg").html(txt);
            event.stopPropagation();//停止事件冒泡
        });
        //为div元素绑定click事件
        $("#content").bind("click",function(){
            var txt=$("#msg").html()+"<p>外层div元素被单击</p>";
            $("#msg").html(txt)
            event.stopPropagation();//停止事件冒泡
        });
        $("body").bind("click",function(){
            var txt=$("#msg").html()+"<p>body元素被单击</p>";
            $("#msg").html(txt);
            event.stopPropagation();//停止事件冒泡
        })
    })
</script>
</body>
</html>
posted @ 2017-03-13 15:18  E度木子  阅读(104)  评论(0)    收藏  举报