jquery的冒泡事件

wensongyu發表於2013-03-26
jQuery事件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>冒泡事件</title>
<script type="text/javascript" src="../js/jquery.js" ></script>
<script>
    $(function(){
            $("#content span").bind("click",function(){
                var txt=$("#msg").html()+"冒泡事件";
                $("#msg").html(txt);    
            })
            $("#content").bind("click",function(){
                var txt=$("#msg").html()+"冒泡事件";
                $("#msg").html(txt);    
            })
            $("body").bind("click",function(){
                var txt=$("#msg").html()+"冒泡事件";
                $("#msg").html(txt);    
            })
    })
</script>
</head>

<body>
    <div id="content">
        <span>我來觸發冒泡</span>
    </div>
    <div id="msg"></div>
</body>
</html>

上面的程式碼中當你單擊span標籤的時候就會觸發#content和body的單擊事件。這種情況稱為冒泡事件。

要消除這種情況可以使用事件物件。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>冒泡事件</title>
<script type="text/javascript" src="../js/jquery.js" ></script>
<script>
    $(function(){
            $("#content span").bind("click",function(event){
                var txt=$("#msg").html()+"冒泡事件";
                $("#msg").html(txt);    
                event.stopPropagation();
            })
            $("#content").bind("click",function(){
                var txt=$("#msg").html()+"冒泡事件";
                $("#msg").html(txt);    
            })
            $("body").bind("click",function(){
                var txt=$("#msg").html()+"冒泡事件";
                $("#msg").html(txt);    
            })
    })
</script>
</head>

<body>
    <div id="content">
        <span>我來觸發冒泡</span>
    </div>
    <div id="msg"></div>
</body>
</html>

 在阻止預設的事件是可以使用

event.preventDefault() ;或者

return false;或者

event.stopPropagation();


相關文章