js事件冒泡實(shí)例分享(已測(cè)試)
更新時(shí)間:2013年04月23日 16:34:08 作者:
js事件冒泡實(shí)例:摘的網(wǎng)上的例子,但是他寫的有錯(cuò)誤,自己改正了下,已驗(yàn)證通過,感興趣的朋友可以參考下哈
網(wǎng)上的例子用的是$(".b").live("click",function(event){} ,jquery自動(dòng)對(duì)live做了處理,阻止了事件冒泡。改成bind,實(shí)驗(yàn)就能通過。
< !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>無標(biāo)題文檔</title>
<script type="text/javascript" src="http://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()//注釋掉,<SPAN style="BACKGROUND-COLOR: rgb(255,255,255)">效果是不一樣的。</SPAN>
})
});
</script>
</head>
<body>
<div id="temp"></div>
<div class="b" style="background:#3ff333">wrapwrapwrapwrapwrapwrapwrap
<div style="background:#ffff11" class="b">這是公告標(biāo)題1</div>
<div style="background:#ffff11" class="b">這是公告標(biāo)題2</div>
<div style="background:#ffff11" class="b">這是公告標(biāo)題3</div>
<div style="background:#ffff11" class="b">這是公告標(biāo)題4</div>
wrapwrapwrapwrapwrapwrapwrap
</div>
</body>
</html>
以上代碼中添加與否
event.stopPropagation();
復(fù)制代碼 代碼如下:
< !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>無標(biāo)題文檔</title>
<script type="text/javascript" src="http://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()//注釋掉,<SPAN style="BACKGROUND-COLOR: rgb(255,255,255)">效果是不一樣的。</SPAN>
})
});
</script>
</head>
<body>
<div id="temp"></div>
<div class="b" style="background:#3ff333">wrapwrapwrapwrapwrapwrapwrap
<div style="background:#ffff11" class="b">這是公告標(biāo)題1</div>
<div style="background:#ffff11" class="b">這是公告標(biāo)題2</div>
<div style="background:#ffff11" class="b">這是公告標(biāo)題3</div>
<div style="background:#ffff11" class="b">這是公告標(biāo)題4</div>
wrapwrapwrapwrapwrapwrapwrap
</div>
</body>
</html>
以上代碼中添加與否
復(fù)制代碼 代碼如下:
event.stopPropagation();
您可能感興趣的文章:
- javascript mouseover、mouseout停止事件冒泡的解決方案
- Javascript 阻止javascript事件冒泡,獲取控件ID值
- JavaScript 事件冒泡簡(jiǎn)介及應(yīng)用
- js下關(guān)于onmouseout、事件冒泡的問題經(jīng)驗(yàn)小結(jié)
- js如何取消事件冒泡
- js之事件冒泡和事件捕獲詳細(xì)介紹
- js阻止冒泡及jquery阻止事件冒泡示例介紹
- js阻止默認(rèn)事件與js阻止事件冒泡示例分享 js阻止冒泡事件
- javascript事件冒泡詳解和捕獲、阻止方法
- javascript從作用域鏈談閉包
- 淺析JavaScript作用域鏈、執(zhí)行上下文與閉包
- JS阻止事件冒泡行為和閉包的方法
相關(guān)文章
JavaScript 節(jié)點(diǎn)操作 以及DOMDocument屬性和方法
最近發(fā)現(xiàn)DOMDocument對(duì)象很重要,還有XMLHTTP也很重要 注意大小寫一定不能弄錯(cuò).2007-12-12JavaScript實(shí)現(xiàn)數(shù)值自動(dòng)增加動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)數(shù)值自動(dòng)增加動(dòng)畫,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-12-12javascript setTimeout()傳遞函數(shù)參數(shù)(包括傳遞對(duì)象參數(shù))
由于需要,我要用到setTimeout()并且在里邊的函數(shù)參數(shù)傳遞一個(gè)參數(shù),就像這樣setTimeout("fun(參數(shù))", 1000)。但是以我這種寫法,js會(huì)報(bào)錯(cuò),說‘參數(shù)’未定義。2010-04-04javascript使用canvas實(shí)現(xiàn)餅狀圖效果
這篇文章主要為大家詳細(xì)介紹了javascript使用canvas實(shí)現(xiàn)餅狀圖效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09json實(shí)現(xiàn)添加、遍歷與刪除屬性的方法
這篇文章主要介紹了json實(shí)現(xiàn)添加、遍歷與刪除屬性的方法,結(jié)合簡(jiǎn)單實(shí)例形式分析了json常見的添加、遍歷與刪除操作相關(guān)技巧,需要的朋友可以參考下2016-06-06