jQuery .Click是否适用于所有子div？

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);
            });
        });
    });
});

编辑：

问题是让我们将click事件似乎应用于所有子div，我只希望它应用于“ #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()会降低不透明度，这也会对元素的后代产生影响。