簡單說明
簡單來說，事件捕獲是從父層到子層依序向下查找事件，事件冒泡則是子層到父層依序向上被觸發。因此，如果某父層也有事件，那麼子層觸發後也會接著觸發該父層，直到跑完 document。如果不希望層層被觸發，就要在事件中加上阻止事件冒泡的機制。
事件捕獲
當冒泡事件發生後，事件捕獲會從 document > <html> > <body> > <div> 依據往下找事件來源，當找到事件後則觸發該事件，事件冒泡會往上依序觸發。
事件冒泡
事件冒泡後會往上依序冒泡，順序則是 <div> > <body> > <html> > document，如果層層元素中還有其他事件，則其他事件也會被觸發。如果不希望觸發父層，則需要阻止事件冒泡。
範例
<div id="grandfather">
<div id="father">
<div id="child">
</div>
</div>
</div>
script
為求簡便，以下用jQuery展示:
$(document).ready(function(){
$('#grandfather').click(function(e){
alert('grandfather');
});
$('#father').click(function(e){
alert('father');
});
$('#child').click(function(e){
alert('child');
e.stopPropagation(); // 阻止冒泡事件
});
});
在上述範例中，由於已加上阻止事件冒泡，因此點擊 #child時只會跳出 child 訊息。
如果將阻止冒泡事件註解起來，則點擊 .child 時，除了跳出 child 訊息外，還會接著跳 father 訊息，然後再跳出 grandfather 訊息。
總結
只要在事件中加上 e.stopPropagation(); 就可以阻止觸發祖輩層事件。事件觸發是從該事件開始往父層向上觸發，因此同輩與子孫輩不受影響。
本文是否對您有幫助？