Jquery. Клик относится ко всем подразделам?

Question

HTML:

<div id="lowerLayer">
    <div id="positionLayer">
        <div id="imageLayer">
            <div id="imageHolder" style="background-image: url('/Images/Loading/ajax-loader.gif');">

            </div>
        </div>
    </div>
</div>

CSS:

#lowerLayer
{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    background-color: Green;
    cursor: help;
}
#positionLayer
{
    position: relative;
    margin-top: 80px;
    width: 100%;
    background-color: Red;
}
#imageLayer
{
    position: relative;
    width: 450px;
    height: 400px;
    margin: auto;
    background-color: Blue;
    background-image: url('../Images/Large-image-holder.png');
}
#imageHolder
{
    position: absolute;
    left: 25px;
    top: 25px;
    width: 400px;
    height: 300px;
    line-height: 300px;
    background-position: center;
    background-repeat: no-repeat;
    background-color: Aqua;
}

JQuery:

$(document).ready(function() {
        $("#lowerLayer").click(function() {
            $(this).fadeTo("fast", 0, function() {
                $(this).hide(0);
            });
        });
    });
});

Edit:

проблема в том, что у нас есть событие click, которое, кажется, применяется ко всем подразделам, я просто хочу, чтобы оно применялось к "#lowerLayer"

Answer 1

Я думаю это решит вашу проблему:

$(document).ready(function() {
        $("#lowerLayer").click(function(e) {

            // Return if it's a child that's clicked:
            if (e.target !== this) {return;}

            // Otherwise continue:
            $(this).fadeTo("fast", 0, function() {
                $(this).hide(0);
            });

        });
    });
});

Answer 2

Оставляя в стороне делегирование событий и пузыри, так как я не думаю, что это имеет отношение к актуальной проблеме здесь.

Метод jQuery hide() применяет display: none к стилям элемента. Если элемент не отображается, то ни один из его потомков тоже не отображается. Аналогично, fadeTo() уменьшает непрозрачность, что также влияет на потомков элемента.