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í)上傳，就是說(shuō)，如果子元素觸發(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í)上傳，就是說(shuō)，如果子元素觸發(fā)了單擊事件，那么也會(huì)觸發(fā)父元素的單擊事件；event.cancelBubble=true;可以停止事件繼續(xù)上傳補(bǔ)充一點(diǎn)，Ie的事件傳遞是從下到上的：
相關(guān)文章
妙用Bootstrap的 popover插件實(shí)現(xiàn)校驗(yàn)表單提示功能
最近使用bootstrap開(kāi)發(fā)項(xiàng)目比較多，在表單校驗(yàn)功能中用popover插件實(shí)現(xiàn)出錯(cuò)提示功能很方面，下面小編給大家?guī)?lái)了一篇關(guān)于Bootstrap的 popover插件實(shí)現(xiàn)校驗(yàn)表單提示功能的實(shí)現(xiàn)代碼，非常不錯(cuò)，感興趣的朋友一起看看吧2016-08-08
JS簡(jiǎn)單獲取當(dāng)前年月日星期的方法示例
這篇文章主要介紹了JS簡(jiǎn)單獲取當(dāng)前年月日星期的方法,結(jié)合完整實(shí)例形式分析了javascript基于自定義函數(shù)獲取當(dāng)前日期時(shí)間的方法,涉及javascript中Date()類的使用與日期相關(guān)運(yùn)算技巧,需要的朋友可以參考下2017-02-02
詳解element-ui 表單校驗(yàn) Rules 配置 常用黑科技
這篇文章主要介紹了element-ui 表單校驗(yàn) Rules 配置 常用黑科技，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-07-07
本文主要介紹了聊一聊JavaScript中的內(nèi)存泄漏，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
這篇文章介紹了JS檢測(cè)圖片大小的實(shí)例，有需要的朋友可以參考一下2013-08-08
本文詳細(xì)介紹下，如何動(dòng)態(tài)加載外部js文件及js；動(dòng)態(tài)加載外部css樣式及css樣式，感興趣的朋友可以參考下哈，希望對(duì)你學(xué)習(xí)js有所幫助2013-04-04
JavaScript+html實(shí)現(xiàn)前端頁(yè)面滑動(dòng)驗(yàn)證(2)
這篇文章主要為大家詳細(xì)介紹了JavaScript+html實(shí)現(xiàn)前端頁(yè)面滑動(dòng)驗(yàn)證的第二種方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
原型和原型鏈?zhǔn)莏s中的難點(diǎn)也是重點(diǎn),明白了原型和原型鏈會(huì)讓我們?cè)诤竺娌还苁菍W(xué)習(xí)還是工作都會(huì)更加高效,這篇文章主要給大家介紹了關(guān)于JavaScript原型與原型鏈的相關(guān)資料,需要的朋友可以參考下2021-10-10
利用javascript實(shí)現(xiàn)web頁(yè)面中指定區(qū)域打印
將需要打印的課程表的table放入div標(biāo)簽中，然后指定出需要打印的區(qū)域，最后調(diào)用window.print打印指定內(nèi)容2013-10-10
javascript中onmouse事件在div中失效問(wèn)題的解決方法
我們預(yù)期只有當(dāng)鼠標(biāo)從div中移開(kāi)的時(shí)候才會(huì)觸發(fā)onmouseout事件，可事實(shí)上，當(dāng)我們移到div中的元素時(shí)，例如：本例中的a標(biāo)簽時(shí)，就會(huì)觸發(fā) onmousout事件2012-01-01