javascript - 单击页面上的任何其他位置（元素外）时隐藏元素

Question

我正在处理我网页中的弹出菜单。目前，我可以成功显示菜单。我想要做的是当我在菜单外单击时隐藏菜单。我知道这样做的一种方法是将点击事件绑定到文档：

$(document).on('click', function(event) {
    // here I can hide the menu
});

但我不想这样做，因为将单击事件绑定到文档看起来很丑陋，并且使代码难以维护。

非常感谢。：）

Answer 1

您可以像这样包装弹出菜单：

<div class="overlay">
    <div class="popup">...</div>
<div>

接着

$(".overlay").click(function(){
    // hide your popup
})

最好设置覆盖位置：固定