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