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

小提琴： 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/

Answer 2

event.target仅当目标类名称匹配时，您才能使用指定您的操作outer：

$('.outer').click(function(ev){
    var target = ev.target;
    if (target.className.match(/\bouter\b/)) {
        $(this).find('.inner').toggle();
    }
});​​​​​​

看演示

Answer 3

做这样的事情？

$('.outer').click(function(){
   $('.inner').css('display', 'none');
});

或者因为它的孩子

$('.outer').click(function(){
   $(this).find('.inner').css('display', 'none');
});