js事件冒泡實(shí)例分享(已測(cè)試)

更新時(shí)間：2013年04月23日 16:34:08 作者：

js事件冒泡實(shí)例：摘的網(wǎng)上的例子，但是他寫的有錯(cuò)誤，自己改正了下，已驗(yàn)證通過(guò)，感興趣的朋友可以參考下哈

網(wǎng)上的例子用的是$(".b").live("click",function(event){} ，jquery自動(dòng)對(duì)live做了處理，阻止了事件冒泡。改成bind，實(shí)驗(yàn)就能通過(guò)。

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