使用 jQuery 单击外部容器时隐藏 div

Question

我有 2 个 div，一个重叠在另一个上面。当我单击外部 div 时，我想隐藏内部 div。当我点击内部 div 时，内部 Div 不会发生任何事情。同时，内部 div 中的链接应该可以正常工作。如何使用 jquery 做到这一点？

<div class="outer">
    <div class="inner"></div>
</div>

.outer {
    background-color: #000;  
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9998;
    height: 100%;
    width: 100%;
    opacity: 0.5;
}

.inner {
    background-color: blue;
    width: 240px;
    position: fixed;
    z-index: 9999;
    left: 50%;
    top: 50%;
    margin-left: -300px;
    margin-top: -150px;
}

无法按预期工作的 jQuery 代码：

$('.outer').click(function(e){
    $('.inner').hide();
});

$('.inner').click(function(e){
    return false;
});   

Answer 1

这几乎总是通过防止冒泡来完成的。由于任何点击.inner都会冒泡到.outer，我们需要阻止这些点击：

$(".outer")
    .on("click", function () {
        $(this).find(".inner").slideUp();
    })
    .on("click", ".inner", function (event) {
        event.stopPropagation();
    });?

小提琴：http : //jsfiddle.net/22Uz7/
小提琴（使用你的 CSS）：http : //jsfiddle.net/22Uz7/1/

您在下面的评论中表示您使用的是 jQuery 1.4.2。因此，您将无法访问该.on方法 - 以下代码应在 1.4.2 下工作：

$(".outer").bind("click", function () {
    $(this).find(".inner").slideUp();
});

$(".inner").bind("click", function (event) {
    event.stopPropagation();
});?

小提琴：http : //jsfiddle.net/22Uz7/3/