javascript - "lightbox"弹窗区的JS点击无效

Question

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

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

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

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

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

谢谢!

Answer 1

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

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

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

这将检查 click 是否来自 #dialogBox 元素内的任何位置 - 如果不是(注意 ! 在if 语句)，它运行 .addClass() 部分。

引用资料:

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