jquery - 使用 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();
    });​

fiddle :http://jsfiddle.net/22Uz7/
fiddle (使用 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();
});​

fiddle :http://jsfiddle.net/22Uz7/3/