Javascript 通过单击弹出窗口外部隐藏弹出窗口

我读到这篇文章说，通过点击弹出窗口之外的任何地方来关闭弹出窗口的流行方式是一种不好的做法

他在文章中给出了另一种解决办法

$(document).on('click', function(event) {
if (!$(event.target).closest('#menucontainer').length) {
// Hide the menus.
}
});

对上述代码的解释：“上述处理程序侦听文档上的单击，并检查事件目标是否为#menucontainer或是否将#menucontainer作为父对象。如果不是，则您知道单击来自#menucontainer的外部，因此，如果菜单可见，您可以隐藏它们。”

我不使用jQuery，所以我尝试在vanilla.js中实现类似的东西

我尝试过的一件事是用CSS停止指针事件，但在内部弹出窗口中可能有一些东西，比如按钮，我确实希望可以单击

如果它混淆了问题-我的弹出窗口是一个黑色的覆盖与降低透明度，然后另一个div内是实际的弹出窗口

我尝试了这个，但没有成功-我只是在显示弹出窗口后才连接侦听器：

function showPopup(popup) {
popup.style.display = "flex";
popup.addEventListener("click", function(event) {
if (!event.currentTarget.contains(target)) {
    closePopup(event.currentTarget);
}
})

编辑：这很有效

function clickOutsidePopup(e, popup) {
console.log(e.target)
if (e.target.querySelector(".inner")) {
closePopup(popup);
}
}

---

不要停止指针事件，而是编写一个有效的函数，如下所示：

document.addEventListener('click', function(e) {
    var el = e.target.closest('#menucontainer');
    if (el) {
        // click inside the popup
    } else {
        // click outside the popup
    }
});

记住在弹出窗口关闭时删除事件处理程序，否则会有多个事件处理程序相互抵消

---

请注意，需要使用polyfill才能在IE中工作。

方法更简单：

创建覆盖整个身体的覆盖层（绝对位置；顶部：0；左侧：0；宽度100%；高度：100%；z指数：2）。附加一个onclick事件，该事件触发模式关闭（）

---

把你的模型放在上面。单击覆盖后，只需将其移除并关闭模式。（位置：绝对；z指数：3）

这基本上是我尝试的第一件事。我已经在用一个覆盖全身的潜水器了。当您在弹出窗口内单击时，将事件侦听器放在外部div上也会关闭弹出窗口。@Ollie_W-如果

event.target

未定义，则您正在做一些严重错误的事情。这应该可以正常工作->不支持最近的IE@adeneo杰出的你能解释一下你为什么使用setTimeOut吗？@Santiago-没有时间设置，它只是用来“推迟”某件事到以后的时间。我猜我发现了在移除事件处理程序的同时重新绑定事件处理程序的问题，或者类似的问题，所以我只是在我发布的演示中用超时来解决这个问题