覆盖闭合答案

【问题标题】：Overlay closing覆盖闭合
【发布时间】：2012-04-03 21:56:54
【问题描述】：

我有一个叠加层：

<div id="overlayer" class="overlayer">
<div id="board" class="board"></div>
</div>

使用这些 css 属性：

#overlayer
{
position:fixed;
display:none;
top:0;
left:0;
width:100%;
height:100%;
background: -moz-linear-gradient(
        top,
        #807980 0%,
        #3d323d);
background: -webkit-gradient(
        linear, left top, left bottom, 
        from(#807980),
        to(#3d323d));
        opacity:0.6;
        z-index:9998;
}

#board
{
position:relative;
left:33%;
top:20%;
width:600px;
height:450px;
border-radius:15px;
background-color:white;
z-index:9999;
display:none;
}

我用这个脚本触发它：

<script type="text/javascript">
$(document).ready(function(){
function overlayerOn(){
    $('#overlayer').fadeIn(800);
}

function overlayerOff(){
    $('#overlayer').fadeOut(800);
};

$('#fr').click(function(e){
    overlayerOn();
    var $br = $('#board');
    $br.css('display', 'block');
    });

$('#overlayer').click(function(e){
    overlayerOff();});

});
</script>

但是当我关闭叠加层时，我希望它仅在单击叠加层时关闭，但即使我单击叠加层中间的 div，我的脚本也会关闭。任何想法？谢谢...

【问题讨论】：

标签： javascript jquery css overlay opacity

【解决方案1】：

你必须停止事件的传播：

$('#board').click(function(e){e.stopPropagation();});

另见

【讨论】：

完美！非常感谢！

【解决方案2】：

这称为event propagation，您可以通过在单击board 元素时添加e.stopPropagation(); 来阻止click 事件传播到DOM，如下所示：

$('#board').click(function(e){
    e.stopPropagation();
});

【讨论】：

【解决方案3】：

您可以尝试添加：


$("#board").click(function(e) {
    e.stopPropagation();
    return false;
});

你的意思是这样的吗？

【讨论】：

【解决方案4】：

是的，老兄，诀窍是使用 e.target 属性用这个替换关闭函数，你应该很甜蜜：

$('#overlayer').click(function(e){
    if (e.target === $('#overlayer')[0]) {
     overlayerOff();
    }
});

这与事件冒泡有关，阅读一下这个坏男孩，你应该很快就会明白： http://www.quirksmode.org/js/events_order.html

【讨论】：

【解决方案5】：

见SO duplicate Q 基本上你应该防止事件在内部 div 上传播，

$("#board").click(function(e){
   e.stopPropagation(); //except on IE this works
});

【讨论】：