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

Question

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

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

但我不想这样做，因为将click事件绑定到文档看起来非常难看并且使代码难以维护。

非常感谢。）

Answer 1

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

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

然后

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

最好使叠加位置：固定