Js冒泡事件詳解及阻止範例_javascript技巧

Js冒泡機制是指如果某元素定義了事件A，如click事件，如果觸發了事件之後，沒有阻止冒泡事件，那麼事件將向父級元素傳播，觸發父類別的click函數。
如下例所示：

複製程式碼 程式碼如下:

<script> <BR>function ialertdouble(e) { <BR>alert('innerdouble' ); <BR>stopBubble(e); <BR>} <BR><br>function ialertthree(e) { <br>alert('innerthree'); <BR>stopBubbleDouble(e); <BR>} <BR>} <br><br>function stopBubble(e) { <BR>var evt = e||window.event; <BR>evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble=true);//阻止冒泡<BR>} <br><br>function stopBubbleDouble(e) { <BR>var evt = e||window.event; <BR>evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble=true)/cancelBubble=)/cancelBubble=); /阻止冒泡<BR>evt.preventDefault();//阻止瀏覽器預設行為，這樣連結就不會跳轉<BR>} <br><br>$(function() { <BR>//方法一<BR>//$('#jquerytest').click(function(event) { <BR>// alert('innerfour'); <BR>// event.stopPropagation(); <BR>// event .preventDefault(); <BR>//}); <br><br>//方法二<BR>$('#jquerytest').click(function() { <BR>alert('innerfour'); <BR>return false; <BR>}); <BR>}); <BR></script>

without

middle

inner

innerdouble div>

innerthree

innerfour

當你點擊inner的時候，會依序彈出'inner'，'middle'和'without'。這就是事件冒泡。

從直覺來看，也是這樣的，因為最裡層的區域是在父級節點中的，點擊了子級節點的區域，其實也是點擊了父級節點的區域，所以事件會傳播起來。

其實，很多的時候，我們不想事件冒泡，因為這樣會同時觸發幾個事件。

接下來：我們點選innerdouble。就會發現她並沒有冒泡，因為她在呼叫的方法ialertdouble()中呼叫了stopBubble()方法，方法透過判斷瀏覽器型別（Ie透過cancleBubble() 、firefox透過stopProgation()）來阻止冒泡。

但如果是連結的話，我們會發現她也會阻止冒泡，但是會跳轉，這就是瀏覽器的預設行為。需要藉助preventDefault()方法來阻止。具體可以查看ialertthree()。

目前主流的都是藉助jquery來綁定click事件的，這樣的話，就簡單多了。

我們可以在點擊事件時傳入參數event，然後直接

event.stopPropagation();
event.preventDefault(); //沒有連結不需要加上這個。

這樣就可以了。

框架就是好，其實還有更簡單的，在事件處理程序中回傳false，這是對在事件物件上同時呼叫stopPropagation()和preventDefault()的一種簡寫方式。
【詳細程式碼見上面，記得載入jquery.js。 】

其實也還可以在每個click事件中加入判斷：

複製程式碼 程式碼如下:

$('#id').click(function(event){
if(event.target==this){
//do something
}
})

解析：事件處理程序中的變數event保存事件物件。而event.target屬性則保存著發生事件的目標元素。這個屬性是DOM API中規定的，但是沒有被所有瀏覽器實作 。 jQuery對這個事件物件進行了必要的擴展，從而在任何瀏覽器中都能夠使用這個屬性。透過.target，可以確定DOM中首先接收到事件的元素（即實際被點擊的元素）。而且，我們知道this引用的是處理事件的DOM元素，所以可以寫以上程式碼。

不過推薦使用return false，Jquery綁定事件的話。