快捷導(dǎo)航

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>無標(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();

您可能感興趣的文章:

相關(guān)文章

微信小程序12行js代碼自己寫個滑塊功能(推薦)
這篇文章主要介紹了微信小程序12行js代碼自己寫個滑塊功能,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-07-07
JavaScript+Canvas模擬實現(xiàn)支付寶畫年兔游戲
接近過年了，支付寶的集福的活動又開始了，集美們的五福集齊了沒有。每年的集?；顒佣加幸恍┬∮螒颍衲暌膊焕?，畫年畫就是其中之一，本篇用canvas來寫一個畫年兔的游戲
2023-01-01
使用JavaScript實現(xiàn)等比縮放的幾種常見方法
這篇文章主要介紹了如何使用JavaScript對HTML中的元素和任意DOM元素進(jìn)行等比縮放,通過獲取容器或元素的尺寸信息,計算縮放比例,并應(yīng)用CSS變換（transform屬性）來實現(xiàn)等比縮放,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-01-01
使用JS實現(xiàn)jQuery的addClass, removeClass, hasClass函數(shù)功能
這篇文章主要介紹了使用JS實現(xiàn)jQuery的addClass, removeClass, hasClass函數(shù)功能,需要的朋友可以參考下
2014-10-10
使用JavaScript實現(xiàn)檢測網(wǎng)頁是否為空閑狀態(tài)
最近開發(fā)項目時,常碰到“用戶在一定時間內(nèi)無任何操作時,跳轉(zhuǎn)到某個頁面”的需求,所以本文就來使用JavaScript實現(xiàn)這一要求,需要的可以參考下
2024-03-03
使用webpack搭建vue項目實現(xiàn)腳手架功能
這篇文章主要介紹了使用webpack搭建vue項目實現(xiàn)腳手架功能，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
js實現(xiàn)精確到秒的日期選擇器完整實例
這篇文章主要介紹了js實現(xiàn)精確到秒的日期選擇器,以完整實例形式分析了JavaScript日期選擇器的實現(xiàn)步驟與相關(guān)技巧,涉及JavaScript針對時間與日期的相關(guān)運算,需要的朋友可以參考下
2016-04-04
js 目錄列舉函數(shù)
用js獲取文件目錄的代碼，一般主要是用了區(qū)別vbs的一些代碼
2008-11-11
JS實現(xiàn)消息來時讓網(wǎng)頁標(biāo)題閃動效果的方法
這篇文章主要介紹了JS實現(xiàn)消息來時讓網(wǎng)頁標(biāo)題閃動效果的方法,實例分析了JavaScript基于時間函數(shù)動態(tài)操作頁面元素的技巧,并附帶了開心網(wǎng)的標(biāo)題閃動解決方案,需要的朋友可以參考下
2016-04-04
Javascript 數(shù)組添加一個 indexOf 方法的實現(xiàn)代碼
Javascript 的字符串有個 indexOf 的方法，能夠返回字符在指定的字符串中的位置，非常有用，本文介紹了如何給 Javascript 數(shù)組也添加一個類似的方法。
2009-09-09