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