Javascript 叠加闭合

我有一个覆盖图：

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

我用这个脚本触发它：

<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>

$（文档）.ready（函数（）{
函数覆盖层（）{
$（#overlayer'）。fadeIn（800）；
}
函数overlayerOff（）{
$（'覆盖层'）。淡出（800）；
};
$（'#fr'）。单击（函数（e）{
覆盖层（）；
var$br=$（'董事会'）；
$br.css（'display'，'block'）；
});
$（“#覆盖层”）。单击（函数（e）{
覆盖层（）；}）；
});

---

但当我关闭覆盖时，我希望它只在单击覆盖时关闭，但我的脚本即使在覆盖中间单击div时也会关闭。有什么想法吗？谢谢…

您必须停止事件的传播：

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

另见

这被调用，您可以通过添加

e.stopPropagation（）来阻止
click
事件向上传播DOM，从而停止此操作单击
板
元素时，如下所示：

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

您可以尝试添加：


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

你的意思是这样的。
是的，伙计，诀窍是使用e.target属性
将关闭功能替换为此，您应该会感到愉快：

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

这一切都与事件冒泡有关，读一读这个坏男孩，你应该很快理解它：
请参见
基本上应该防止事件在内部div上传播

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

完美的非常感谢你！
$("#board").click(function(e){
   e.stopPropagation(); //except on IE this works
});