javascript - 使 div 的一部分可点击

Question

我在使用弹出窗口时遇到了问题，该窗口在可见时需要关闭当用户单击底层灰色区域(弹出窗口后面的区域)，而不在弹出窗口本身。

有什么办法可以实现这个目标吗？

<小时/>

HTML

<div>
    <div class="b-popup" id="uploader">
    <div class="b-popup-content" id="uploader">
        Text in Popup<br>
        <a href="javascript:PopUpHide()">Hide popup</a>
    </div>
</div>

CSS

*{
    font-family: Areal;
}
.b-container{
    width:200px;
    height:150px;
    background-color: #ccc;
    margin:0px auto;
    padding:10px;
    font-size:30px;
    color: #fff;
}
.b-popup{
    width:100%;
    min-height:100%;
    background-color: rgba(0,0,0,0.5);
    overflow:hidden;
    position:fixed;
    top:0px;
}
.b-popup .b-popup-content{
    margin:40px auto 0px auto;
    width:600px;
    height: 600px;
    padding:10px;
    background-color: #c5c5c5;
    border-radius:5px;
    box-shadow: 0px 0px 10px #000;
}

JavaScript - jQuery

$('div.b-popup').click(function () {
    PopUpHide();
});

示例在这里:http://jsfiddle.net/p7NbX/15/

<小时/>

我尝试在 div 单击时设置函数调用，但如果我单击弹出内容 div，它会关闭弹出窗口。

Answer 1

向整个 .b-popup 添加点击事件监听器，但仅当事件目标与 .b-popup-content 元素不同时才关闭弹出窗口( 编辑:或其任何子项，如@BrettCaswell指出的)，例如:

$('.b-popup').on('click', function(e){
    if( ! $(e.target).is('.b-popup-content, .b-popup-content *') ){
        PopUpHide();
    }

});

http://jsfiddle.net/p7NbX/1515/