首頁 > 開發者 > JavaScript
什麼是冒泡
簡單的說就是觸發一個子容器的事件，父容器的事件也會跟著被觸發。
<div id="parentDiv" onclick="alert('parent');"> parent
<div id="childDiv" onclick="alert('child');">child</div>
</div>
在child和parent上分別添加了alert('child')和alert('parent')事件，這個時候假如我們點擊child，會先執行alert('child')，然後父元素的alert('parent')也會被執行，當然假如還有更多的層次，父級的事件會依次被觸發，這就是冒泡。
但有些時候我麼會不需要這樣的機制，不如我們點擊child只想觸發child上的alert('child')事件，那麼我們就要阻止冒泡的發生，做法如下。
如何阻止冒泡？
阻止冒泡有兩種方法
e.cancelBubble=true;
e.stopPropagation();
據說e.stopPropagation();是針對firefox的，e.cancelBubble=true;是針對IE的。
下面舉個例子
<div id="parentDiv" onclick="alert('parent');">
parent
<div id="childDiv" onclick="doSomething(this,event);">child</div>
</div>
function doSomething (obj,evt) {
var e=evtwindow.event;
e.stopPropagation();
}
因為在doSomething裡阻止了冒泡，所以parentDiv上的alert('parent')事件也就不會被觸發了。
如何利用冒泡？
當然有的時候我們還會利用一下冒泡，滿足我們的需求，比如有很多個元素都要添加一個事件來處理某件事，但是假如把某個元素上都加上onclick的話，首先效能不說，這麼多的代碼也會讓人嗤之以鼻，這就可以用到冒泡。
因為這些元素事件的觸發都能夠通過冒泡來觸發他父親的事件，那就只給他父親加上事件吧，然後再判斷確切是那個元素的時間被觸發。然後你就可以為所欲為了。
例子：
<table onclick="clicktd(event);" width="400" height="200" border="1">
<tr>
<td id="td1" width="25%">td1</td>
<td id="td2" width="25%">td2</td>
<td id="td3" width="25%">td3</td>
<td id="td4" width="25%">td4</td>
</tr>
</table>
function clicktd(e){
e = e window.event;
var obj = e.target e.srcElement;
alert(obj.id);
}
這裡主要是通過e.target 或e.srcElement(根據瀏覽器不同)擷取確切的元素。接下來怎麼做大家應該知道了。
最後來個例子的集合
<html>
<head>
<title>www.cxybl.com</title>
<style>
#parentDiv{width:200px;height:200px;background:#666;}
#childDiv{width:100px;height:100px;background: #06C; margin:50px;}
</style>
</head>
<body>
沒被阻止冒泡的：
<div id="parentDiv" onclick="alert('parent');">
parent
<div id="childDiv" onclick="alert('child')">child</div>
</div>
<br/>
被阻止冒泡的：
<div id="parentDiv" onclick="alert('parent');">
parent
<div id="childDiv" onclick="doSomething(this,event);">child</div>
</div>
<br/>
冒泡的應用：
<table onclick="clicktd(event);" width="400" height="200" border="1">
<tr>
<td id="td1" width="25%">td1</td>
<td id="td2" width="25%">td2</td>
<td id="td3" width="25%">td3</td>
<td id="td4" width="25%">td4</td>
</tr>
</table>
<script>
function doSomething (obj,evt) {
var e=evtwindow.event;
alert("child");
e.stopPropagation();
}
function clicktd(e){
ee = e window.event;
var obj = e.target e.srcElement;
alert(obj.id);
}
</script>
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
