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

Question

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

我的问题是，我希望当用户点击调暗的背景时叠加层消失，但是如果他们在对话框区域中单击则不会消失。

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

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

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

谢谢！

Answer 1

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

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

DEMO： http://jsfiddle.net/A7rNE/

这将检查click是否来自#dialogBox元素中的任何位置 - 如果没有（请注意!语句中的if），它会运行.addClass()部分。

参考文献：

• .on()：http://api.jquery.com/on/
• .closest()：http://api.jquery.com/closest/

Answer 2

这应该可以防止click事件冒泡到关闭灯箱的任何元素句柄：

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