獲取子元素的事件而不觸發父母的相同事件

Question

我有父節點和子節點。他們都有'點擊'事件列表。由於<a>是子元素，因此我無法點擊它而不點擊父父< div & gt，所以總是會觸發父<div>的事件。我如何得到子元素<a>的事件而不觸發父母的一個<div>？ 這裏是jsFiddle和代碼：
HTML

<div id="container"> 
    <a href="" id="link"></a> 
</div> 

CSS：

#container { 
    width:100px; 
    height:100px; 
    background:blue; 
    position:relative; 
    cursor:pointer; 
} 
#link { 
    width:20px; 
    height:20px; 
    background:green; 
    position:absolute; 
    top:10px; 
    left:10px; 
} 

JS：

$('#container').on('click', function() { 
alert('container'); 
}); 
$('#link').on('click', function() { 
alert('link'); 
}); 

Answer 1

如果你不希望事件到容器的傳播，使用stopPropagation：

$('#container').on('click', function() { 
    alert('container'); 
}); 
$('#link').on('click', function(e) { 
    alert('link'); 
    e.stopPropagation(); 
}); 

（如果你不想觸發鏈接的默認行爲，更換e.stopPropagation();與return false;）