Question

我读到这篇文章说通过点击弹出窗口外的任何地方来关闭弹出窗口的流行方法是一种不好的做法 https://css-tricks.com/dangers-stopping-event-propagation/

他在文章

中提供了另一种解决方案

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

上述代码的说明：＆＃34;上述处理程序侦听文档的点击并检查事件目标是#menucontainer还是#menucontainer作为父项。如果没有，您知道点击源自#menucontainer之外，因此您可以隐藏菜单，如果它们可见。＆＃34;

我没有使用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);
}
}

Answer 1

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

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

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

请注意，element.closest()需要在IE中使用填充。

Answer 2

采用更简单的方法：

创建一个覆盖整个身体的叠加层（正位置绝对;顶部：0;左侧：0;宽度100％;高度：100％; z指数：2）。附加触发 modal.close（）;

的onclick事件

将您的模态放在该叠加层上。单击叠加层时，只需将其移除并关闭模态。（position：absolute; z-index：3）;

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

2 个答案: