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>

然后，当有人单击“overlayOuter”时，我希望 jquery 关闭叠加层，但不单击“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 是否足以遮盖overlayInner 与overlayOuter 分开？

Answer 1

您正在嵌套元素，因此当您单击内部 div 时，您仍然在单击外部。

你需要像这样将它们分开:

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

这样的布局不存在问题，因为您确实将位置设置为绝对

这是 Stack 101s 最初构建的更新后的 jfiddle http://jsfiddle.net/Dapuc/3/