Javascript 通过单击外部隐藏弹出窗口（Philip Waltons解决方案的问题）

我知道以前有人问过通过点击弹出窗口外部来关闭弹出窗口的问题。我有一个有点复杂的弹出窗口，Phillip Walton提供的解决方案不适合我

他的代码只是让我的页面变得模糊，但阻止了弹出窗口的出现

$(document).on('click', function(event) {
if (!$(event.target).closest('.maincontainer').length) {
popup.classList.remove('popup--open');
popup.style.display = 'none';
popupAccessory.style.display = 'none';
popupAccessory.classList.remove('popup--accessory--open');
maincontainer.classList.remove('blurfilter');
}
});

我还尝试：

window.addEventListener('click', function(event) {
if (event.target != popup)  {
popup.classList.remove('popup--open');
popup.style.display = 'none';
popupAccessory.style.display = 'none';
popupAccessory.classList.remove('popup--accessory--open');
maincontainer.classList.remove('blurfilter');
}
}, true);

当我点击任何地方，包括弹出窗口本身时，这会关闭弹出窗口。我希望它只在我点击屏幕上不是弹出窗口的部分时关闭。 打开弹出窗口的代码：

function openpopup() {
popup.style.display = 'initial';
setTimeout(function(){
popup.classList.add('popup--open');
popup.style.boxShadow = '0 0 45px 2px white';
maincontainer.classList.add('blurfilter')}, 10);

for (let i = 0; i < listitems.length; i++ ) {
setTimeout(function() {
  listitems[i].classList.add('visible');
}, 100);
}
}

HTML结构：-

<div class="maincontainer> 
...all my page content... 
</div>

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

---

我建议只使用css类来设置弹出窗口的样式，而只使用JS来添加、删除和切换该类。不确定这把小提琴离你的工作练习有多近，但我准备这把小提琴是为了展示如何检查文档/窗口单击事件以成功打开/关闭弹出窗口


var popupOverlay=document.querySelector（'popup_uoverlay'）；
var popupOpenButton=document.querySelector（“#popupOpenButton”）；
var popupCloseButton=document.querySelector（“#popupCloseButton”）；
var mainContainer=document.querySelector（'main'）；
函数关闭字节id（el，id）{
而（el.id！=id）{
el=el.parentNode；
如果（！el）{
返回null；
}
}
返回el；
}
popupOpenButton.addEventListener（'click'，函数（事件）{
popupOverlay.classList.toggle（'isVisible'）；
});
popupCloseButton.addEventListener（'click'，函数（事件）{
popupOverlay.classList.toggle（'isVisible'）；
});
mainContainer.addEventListener（'click'，函数（事件）{
if（popupOverlay.classList.contains（'isVisible'）&&&！closestById（event.target，'popup\uu overlay'）&&event.target！==popupOpenButton）{
popupOverlay.classList.toggle（'isVisible'）；
}
});
#弹出式覆盖{
显示：无；
背景色：rgba（180,180,180,0.5）；
位置：绝对位置；
顶部：100px；
底部：100px；
左：100px；
右：100px；
z指数：9999；
文本对齐：居中；
}
#弹出窗口\uuu overlay.isVisible{
显示：块；
}
主要{
高度：100vh；
}

弹出标题

乱数假文

关闭弹出窗口
打开弹出窗口
添加相关HTML添加相关HTML:）谢谢David。出于绝望，我可能最终使用停止传播，但Philip Walton文章的主旨是，这种方法存在问题。如果您对该解决方案有任何想法，请告诉我。该解决方案将弹出窗口和主标签中的内容分开。现在，这两个标记都是弹出窗口和普通内容的根，因此它们可以拥有指向不同父级的事件侦听器，并且不会在它们之间发生冲突。注意：main有一个强制高度来占据所有正文内容，因此可以单击。将我的代码更改为使用maincontainer而不是window已起作用：D
<div class="maincontainer> 
...all my page content... 
</div>

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