javascript - Void JS 点击“灯箱”弹出区域

Question

我正在制作一个超级简单的“灯箱”，它会弹出一个对话框和一个暗淡的背景。

我的问题是，当用户单击变暗的背景时，我希望覆盖消失，但如果他们单击对话框区域则不会。

到目前为止，我的方法是这样的：

我添加了一个带有“display:none;”的类到包装器，因此如果单击它会消失。当然，如果您单击#dialogBox，这也会使覆盖消失。有没有办法告诉它在对话框区域中返回单击 false ？或者更好的方法来解决这个问题？

<div id="overlay" onclick="$(this).addClass('displayNone');">
    <div id="dialogBox">
        <p>Lorem ipsum</p>
</div>
</div><!-- /#overlay -->

谢谢！

score 2 · Accepted Answer

移除内联onclick属性/处理程序，并在 JavaScript 中绑定事件：

$("#overlay").on("click", function (e) {
    if (!$(e.target).closest("#dialogBox").length) {
        $(this).addClass('displayNone');
    }
});

演示：http: //jsfiddle.net/A7rNE/

这将检查是否click来自#dialogBox元素内的任何地方——如果不是（注意语句!中的），它将运行该部分。if.addClass()

参考：

score 1 · Accepted Answer

这应该防止点击事件冒泡到处理关闭灯箱的任何元素：

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

2 回答 2