Jquery .Click 适用于所有子 div？答案

【问题标题】：Jquery .Click applies to all sub divs?Jquery .Click 适用于所有子 div？
【发布时间】：2009-06-08 15:29:19
【问题描述】：

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”

【问题讨论】：

标签： javascript jquery html css

【解决方案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);
            });

        });
    });
});

【讨论】：

+1 但我有点惊讶 jquery 没有更多的 jquery 方式来描述 !bubble
似乎不太 jQueryish，但是当您想要区分发起事件的元素 (e.target) 和由于冒泡而捕获它的元素时，e.target 是您需要查看的地方（这)。

【解决方案2】：

将事件委托和冒泡放在一边，因为我认为这与这里的实际问题无关。

jQuery hide() 方法将display: none 应用于元素的样式。如果一个元素没有被显示，那么它的后代也不会被显示。同样，fadeTo() 会降低不透明度，这也会影响元素的后代。

【讨论】：

问题是我让我们点击事件似乎适用于所有子 div 我只是希望它适用于“#lowerLayer”
Petoj，它不会应用于所有“子 div” - 当点击事件发生时，它会通过 DOM 冒泡触发所有祖先的点击（除非它被停止）
事件冒泡（从子级到父级），它们不会涓涓细流——我想你会发现事件只会触发一次。发出警报以向自己证明这一点。
该事件只触发一次，但如果我只点击一个子 div，我不希望它触发 #lowerLayer