IE的事件傳遞-event.cancelBubble示例介紹
更新時(shí)間：2014年01月12日 16:49:16 作者：
關(guān)于event.cancelBubble,Bubble就是一個(gè)事件可以從子節(jié)點(diǎn)向父節(jié)點(diǎn)傳遞，下面有個(gè)不錯(cuò)的示例，大家可以感受下
關(guān)于event.cancelBubble,由于HTML中的對(duì)象都是層次結(jié)構(gòu)，比如一個(gè)Table包含了多個(gè)TR，一個(gè)TR包含了多個(gè)TD
Bubble就是一個(gè)事件可以從子節(jié)點(diǎn)向父節(jié)點(diǎn)傳遞，比如鼠標(biāo)點(diǎn)擊了一個(gè)TD，當(dāng)前的event.srcElement就是這個(gè)TD，但是這種冒泡機(jī)制使你可以從TR或者Table處截獲這個(gè)點(diǎn)擊事件，但是如果你event.cancelBubble，則就不能上傳事件。
例子：
<html>
<body>
<table border="1" width="26%" id="tableA" onclick="alert('tableA')">
<tr onclick="tableA_rowA_click()">
<td width="106">一般</td>
</tr>
<tr onclick="tableA_rowB_click()">
<td width="106">阻止消息上傳</td>
</tr>
</table>
<p> </p>
</body>
</html>
<!-- -->
<script language="javascript">
<!--
function tableA_rowA_click(){
alert('tableA_rowA');
}
function tableA_rowB_click(){
alert('tableA_rowB');
event.cancelBubble=true;
}
//-->
</script>
event.cancelBubble阻止事件冒泡,event.cancelBubble=true;
取消事件冒泡，在 IE 的事件機(jī)制中，觸發(fā)事件會(huì)從子元素向父元素逐級(jí)上傳，就是說，如果子元素觸發(fā)了單擊事件，那么也會(huì)觸發(fā)父元素的單擊事件；event.cancelBubble=true;可以停止事件繼續(xù)上傳補(bǔ)充一點(diǎn)，Ie的事件傳遞是從下到上的：
Bubble就是一個(gè)事件可以從子節(jié)點(diǎn)向父節(jié)點(diǎn)傳遞，比如鼠標(biāo)點(diǎn)擊了一個(gè)TD，當(dāng)前的event.srcElement就是這個(gè)TD，但是這種冒泡機(jī)制使你可以從TR或者Table處截獲這個(gè)點(diǎn)擊事件，但是如果你event.cancelBubble，則就不能上傳事件。
例子：
復(fù)制代碼 代碼如下:
<html>
<body>
<table border="1" width="26%" id="tableA" onclick="alert('tableA')">
<tr onclick="tableA_rowA_click()">
<td width="106">一般</td>
</tr>
<tr onclick="tableA_rowB_click()">
<td width="106">阻止消息上傳</td>
</tr>
</table>
<p> </p>
</body>
</html>
<!-- -->
<script language="javascript">
<!--
function tableA_rowA_click(){
alert('tableA_rowA');
}
function tableA_rowB_click(){
alert('tableA_rowB');
event.cancelBubble=true;
}
//-->
</script>
event.cancelBubble阻止事件冒泡,event.cancelBubble=true;
取消事件冒泡，在 IE 的事件機(jī)制中，觸發(fā)事件會(huì)從子元素向父元素逐級(jí)上傳，就是說，如果子元素觸發(fā)了單擊事件，那么也會(huì)觸發(fā)父元素的單擊事件；event.cancelBubble=true;可以停止事件繼續(xù)上傳補(bǔ)充一點(diǎn)，Ie的事件傳遞是從下到上的：
相關(guān)文章
下面小編就為大家?guī)硪黄狫S中的forEach、$.each、map方法推薦。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-04-04
收藏，對(duì)比功能的JS部分實(shí)現(xiàn)代碼
非常不錯(cuò)的，收藏效果代碼，增加當(dāng)前頁的現(xiàn)實(shí)，實(shí)現(xiàn)對(duì)比2008-08-08
最近這幾天在升級(jí)自己的MVVM 框架,遇到很多小問題,所以想著就在這里統(tǒng)一解決了。文中主要介紹了關(guān)于Javascript中with的替代方法與String中的正則方法，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-12-12
Javascript 函數(shù)的四種調(diào)用模式
這篇文章主要介紹了Javascript 函數(shù)的四種調(diào)用模式的相關(guān)資料,需要的朋友可以參考下2016-11-11
可以判斷confirm選擇了是否2008-10-10
這篇文章主要介紹了js圖片查看器插件用法,結(jié)合實(shí)例形式分析了圖片查看器插件viewer.js簡(jiǎn)單使用技巧,需要的朋友可以參考下2019-06-06
下面小編就為大家?guī)硪黄斦刯s模塊化規(guī)范。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
使用bat打開多個(gè)cmd窗口執(zhí)行g(shù)ulp、node
本文主要介紹了使用bat打開多個(gè)cmd窗口執(zhí)行g(shù)ulp、node的方法。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
在寫原生的Javascript的時(shí)候，因?yàn)镮E的JS引擎與標(biāo)準(zhǔn)瀏覽器的JS引擎之間總有那么些差異，所以經(jīng)常會(huì)去判斷是否是IE瀏覽器2014-04-04
Bootstrap實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)(親測(cè)可用)
這篇文章主要為大家詳細(xì)介紹了Bootstrap實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07