綁定兩個div到兩個click事件時，一個包含中的其他

Question

考慮下面的代碼：

<div id="outer"> 
    <div id="inner"></div> 
</div> 

$('#outer').click(function() { alert ("outer"); }); 
$('#inner').click(function() { alert ("inner"); }); 

內不會被調用，但其他被稱爲好。我想要做一個或者兩種情況。你能否建議一個更好的方法來解決這個問題，這樣我就可以成功點擊我的內部div而不會觸發我的外部div單擊事件？

活生生的例子：http://jsfiddle.net/Squ9m/

Answer 1

使用event.stopPropagation()：

$('#outer').click(function() { alert ("outer"); }); 
$('#inner').click(function(event) { event.stopPropagation(); alert ("inner"); }); 

JS Fiddle demo。

您還可以使用return false：

$('#outer').click(function() { alert("outer"); }); 
$('#inner').click(function(event) { alert("inner"); return false; }); 

JS Fiddle demo。

return false;等效於使用event.stopPropagation()和event.preventDefault();第一個例子是有用的，那麼，如果你想保留被點擊的元素的默認功能，而不允許該事件冒泡DOM樹。

參考文獻：

• event.preventDefault()。
• event.stopPropagation()。

Answer 2

您需要將事件傳遞給爲內部div觸發的方法，然後通知它停止傳播。

$('#inner').click(function(event) { alert("inner"); event.stopPropagation();}); 

Working Example