javascript - 通过在弹出窗口外单击来隐藏弹出窗口

Question

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

他在文章中给出了替代方案

$(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);
}
}

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()需要一个 polyfill 才能在 IE 中工作。