jquery關閉外部和內部點擊重疊？

Question

我對某事感到困惑，以爲這裏有人可能有洞察力。

我已經構建了一個簡單的覆蓋，但它沒有按預期工作。 這裏的CSS：

#overlayOuter { 
     display: none; 
     position: absolute; 
     height: 100%; 
     width: 100%; 
     background: #000; 
     z-index: 100; 
     } 
    #overlayInner { 
     position: absolute; 
     top: 100px; 
     left: 200px; 
     width: 600px; 
     height: 400px; 
     z-index: 101; 
     } 

的HTML很簡單：

Blahblahblah! 
    <a href="#" onclick="$('#overlayOuter').show();return false;">show overlay</a> 
    <div id="overlayOuter"> 
     <div id="overlayInner"> 
      Oyeah? Blahblah! 
     </div> 
    </div> 

我當時就想jQuery來關閉疊加，當有人在overlayOuter 點擊而不是的overlayInner箱（這樣我就可以包括形式等等）。

我期待工作的第一個jQuery的是......

$('#overlayOuter').click(function() { 
     $('#overlayOuter').fadeOut('fast'); 
    }); 

...這工作，但點擊overlayInner當奇怪也關閉！任何形式等都是無用的！

以下確實根據需要工作...

$('#overlayOuter').click(function(e) { 
     if ($(e.target).parents('#overlayInner').length==0) { 
      $('#overlayOuter').fadeOut('fast'); 
     } 
    }); 

...但WTF！不應該第一個工作？ z-index是否足以掩蓋與overlayOuter分開的overlayInner？

Answer 1

你嵌套的元素，所以當你點擊內部的div，你還在點擊外。

你需要他們這樣的分離：與佈局在這裏這樣

<div id="overlayOuter"> 
</div> 
<div id="overlayInner"> 
</div> 

不是一個問題，因爲你沒有設置的位置，以絕對反正

下面是從堆棧101S更新jfiddle初步建成一個 http://jsfiddle.net/Dapuc/3/

Answer 2

第一個做的工作：

http://jsfiddle.net/Dapuc/1/

Answer 3

這是由於Javascript事件傳播/冒泡。發生在元素上的事件也將發生在元素容器上。爲了避免這種情況，檢查event.target是你想要的元素，就像這個演示：http://jsfiddle.net/WQS3V/

Answer 4

可以補充一點：

$('#overlayInner').click(function(e) { 
    e.stopImmediatePropagation(); 
});