js事件冒泡的例子(摘的網上的例子,但是他寫的有錯誤,自己改正瞭下,已驗證通過。)

print?網上的例子用的是$(".b").live("click",function(event){} ,jquery自動對live做瞭處理,阻止瞭事件冒泡。改成bind,實驗就能通過。 

網上的例子用的是$(".b").live("click",function(event){} ,jquery自動對live做瞭處理,阻止瞭事件冒泡。改成bind,實驗就能通過。

 

[html]
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="https://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>無標題文檔</title> 
<script type="text/javascript" src="https://www.css88.com/tool/css3Preview/jquery-1.4.2.min.js"></script> 
<script type="text/javascript"> 
 
$(function(){ 
    $(".b").bind("click",function(event){ 
    $(this).css("color","#FF3300"); 
    event.stopPropagation() 
}) 
}); 
</script> 
</head> 
  
<body> 
<p id="temp"></p> 
<p class="b" style="background:#3ff333">wrapwrapwrapwrapwrapwrapwrap 
<p style="background:#ffff11" class="b">這是公告標題1</p> 
<p style="background:#ffff11" class="b">這是公告標題2</p> 
<p style="background:#ffff11" class="b">這是公告標題3</p> 
<p style="background:#ffff11" class="b">這是公告標題4</p> 
wrapwrapwrapwrapwrapwrapwrap 
</p> 
</body> 
</html> 

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script type="text/javascript" src="https://www.css88.com/tool/css3Preview/jquery-1.4.2.min.js"></script>
<script type="text/javascript">

$(function(){
 $(".b").bind("click",function(event){
 $(this).css("color","#FF3300");
 event.stopPropagation()
})
});
</script>
</head>
 
<body>
<p id="temp"></p>
<p class="b" style="background:#3ff333">wrapwrapwrapwrapwrapwrapwrap
<p style="background:#ffff11" class="b">這是公告標題1</p>
<p style="background:#ffff11" class="b">這是公告標題2</p>
<p style="background:#ffff11" class="b">這是公告標題3</p>
<p style="background:#ffff11" class="b">這是公告標題4</p>
wrapwrapwrapwrapwrapwrapwrap
</p>
</body>
</html>

 

以上代碼中添加與否

[html]
event.stopPropagation();效果是不一樣的。 

event.stopPropagation();效果是不一樣的。

 

 

 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *