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 但不是 overlayInner框时，我想让jquery关闭叠加层（所以我可以包含表格等）。

我期待工作的第一个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/

Answer 2

这是由于Javascript事件传播/冒泡。发生在元素上的事件也将发生在元素容器上。要避免这种情况，请检查event.target是否是您想要的元素，例如在此演示中：http://jsfiddle.net/WQS3V/

Answer 3

第一个确实有效：

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

Answer 4

您可以添加：

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

外部和内部点击的jquery关闭叠加？

4 个答案: