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

编辑：

问题即时通讯让我们看到点击事件似乎应用于所有子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()会降低不透明度，这也会对元素的后代产生影响。

Jquery .Click适用于所有子div？

2 个答案: