結合的div元素與jQuery

Question

結合我有一個HTML頁面是這樣的：

<div id="foo"> 
    first 
    <div> 
    second 
    </div> 
</div> 

現在，我想用jQuery的點擊方法，但點擊時first，不second應該只工作。但是，如果做這樣的事情

$("#foo").click(function() { do things }); 

如果我點擊second裏面，它就像點擊也對first和上述功能將運行。我能避免這種情況嗎？所以，點擊second，會不會運行first的上述功能？

Answer 1

是的，你可以！

$("#foo div.second").click(function(event) { 
    event.stopPropagation(); 
}); 

這將停止傳播到樹中「上方」元素。

Answer 2

$('#foo').click(function(e) { 
    // Do your snazzy stuff. 
}); 

$('#foo div').click(function(e) { 
    e.stopPropagation(); 
}); 

= OR =

$('#foo').children().click(function(e) { 
    e.stopPropagation(); 
});