js事件冒泡實例分享(已測試)
更新時間：2013年04月23日 16:34:08 作者：
js事件冒泡實例：摘的網(wǎng)上的例子，但是他寫的有錯誤，自己改正了下，已驗證通過，感興趣的朋友可以參考下哈
網(wǎng)上的例子用的是$(".b").live("click",function(event){} ，jquery自動對live做了處理，阻止了事件冒泡。改成bind，實驗就能通過。
< !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="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">這是公告標題1</div>
<div style="background:#ffff11" class="b">這是公告標題2</div>
<div style="background:#ffff11" class="b">這是公告標題3</div>
<div style="background:#ffff11" class="b">這是公告標題4</div>
wrapwrapwrapwrapwrapwrapwrap
</div>
</body>
</html>
以上代碼中添加與否
event.stopPropagation();
復制代碼 代碼如下:
< !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="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">這是公告標題1</div>
<div style="background:#ffff11" class="b">這是公告標題2</div>
<div style="background:#ffff11" class="b">這是公告標題3</div>
<div style="background:#ffff11" class="b">這是公告標題4</div>
wrapwrapwrapwrapwrapwrapwrap
</div>
</body>
</html>
以上代碼中添加與否
復制代碼 代碼如下:
event.stopPropagation();
您可能感興趣的文章:
- javascript mouseover、mouseout停止事件冒泡的解決方案
- Javascript 阻止javascript事件冒泡，獲取控件ID值
- JavaScript 事件冒泡簡介及應(yīng)用
- js下關(guān)于onmouseout、事件冒泡的問題經(jīng)驗小結(jié)
- js如何取消事件冒泡
- js之事件冒泡和事件捕獲詳細介紹
- js阻止冒泡及jquery阻止事件冒泡示例介紹
- js阻止默認事件與js阻止事件冒泡示例分享 js阻止冒泡事件
- javascript事件冒泡詳解和捕獲、阻止方法
- javascript從作用域鏈談閉包
- 淺析JavaScript作用域鏈、執(zhí)行上下文與閉包
- JS阻止事件冒泡行為和閉包的方法
相關(guān)文章
這篇文章主要介紹了ES6 javascript的異步操作,結(jié)合實例形式分析了ES5中異步操作的概念、原理、使用方法及相關(guān)注意事項,需要的朋友可以參考下2017-10-10
懸浮窗就是圖中微信圖標的按鈕，采用fixed定位，可拖動和點擊。本文給大家分享一個比較常見的常見，通過實例代碼給大家介紹微信小程序中懸浮窗功能的實現(xiàn)，一起看看吧2019-08-08
下面小編就為大家分享一篇js斷點調(diào)試心得，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
JavaScript 節(jié)點操作 以及DOMDocument屬性和方法
最近發(fā)現(xiàn)DOMDocument對象很重要,還有XMLHTTP也很重要 注意大小寫一定不能弄錯.2007-12-12
bootstrap彈出層有多種觸發(fā)方式，以下是我用到的bootstrap的兩種模態(tài)框方式，需要的的朋友參考下吧2017-05-05
JavaScript實現(xiàn)數(shù)值自動增加動畫
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)數(shù)值自動增加動畫，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
復制本貼標題和地址，發(fā)給QQ|Msn上的好友的代碼，方便利用用戶宣傳的js2008-07-07
javascript setTimeout()傳遞函數(shù)參數(shù)(包括傳遞對象參數(shù))
由于需要，我要用到setTimeout（）并且在里邊的函數(shù)參數(shù)傳遞一個參數(shù)，就像這樣setTimeout（"fun(參數(shù))", 1000）。但是以我這種寫法，js會報錯，說‘參數(shù)’未定義。2010-04-04
javascript使用canvas實現(xiàn)餅狀圖效果
這篇文章主要為大家詳細介紹了javascript使用canvas實現(xiàn)餅狀圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了json實現(xiàn)添加、遍歷與刪除屬性的方法,結(jié)合簡單實例形式分析了json常見的添加、遍歷與刪除操作相關(guān)技巧,需要的朋友可以參考下2016-06-06