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 , но не overlayInnerbox (чтобы я мог включить формы и тому подобное).

Первый 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>

Нездесь проблема с компоновкой, так как вы все равно установили абсолютное положение

Вот обновленный jfiddle из стека 101, изначально построенный http://jsfiddle.net/Dapuc/3/

Answer 2

Это связано с распространением / всплеском событий Javascript. События, которые происходят в элементе, также будут происходить в контейнерах элементов. Чтобы избежать этого, убедитесь, что event.target - это элемент, который вы хотите, как в этой демонстрации: http://jsfiddle.net/WQS3V/

Answer 3

Вы можете добавить это:

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

Answer 4

Первый работает:

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