Javascript 单击“外部”关闭div（父级）

这不是stackoverflow的新问题，但我尝试了所有方法都没有成功

我用两个div创建了一个“弹出窗口”。父对象是背景，子对象是弹出内容。我想在用户点击背景（家长）时隐藏弹出窗口

这听起来对我来说也非常容易，但我无法做到。 这是我的代码，也是我尝试过的（它的工作原理与我想要的正好相反）：

let content=document.querySelector（'.popup content'）；
让popup=document.querySelector（'.popup'）；
let button=document.querySelector（'button'）；
button.onclick=（）=>{
popup.style.display='block'；
content.onclick=e=>{
如果（例如，目标！==此）{
popup.style.display='none'；
}
}
}

.popup{
位置：固定；
z指数：1；
左：0；
排名：0；
宽度：100%；
身高：100%；
溢出：隐藏；
背景色：rgb（0,0,0）；
背景色：rgba（0,0,0,0.4）；
显示：无；
}
.弹出内容{
背景色：#fff；
利润率：10%自动；
填充：20px；
边框：1px实心#888；
宽度：25%；
最小宽度：470px；
边界半径：4px；
}

打开弹出窗口
弹出标题
弹出文本

您应该将这两个事件分开，并将点击连接到

窗口

，这样您就可以在

弹出内容之外检测到点击，如：


let content=document.querySelector（'.popup content'）；
让popup=document.querySelector（'.popup'）；
let button=document.querySelector（'button'）；
button.onclick=（）=>{
popup.style.display='block'；
}
window.onclick=e=>{
如果（例如，目标===弹出窗口）{
popup.style.display='none'；
}
}
.popup{
位置：固定；
z指数：1；
左：0；
排名：0；
宽度：100%；
身高：100%；
溢出：隐藏；
背景色：rgb（0,0,0）；
背景色：rgba（0,0,0,0.4）；
显示：无；
}
.弹出内容{
背景色：#fff；
利润率：10%自动；
填充：20px；
边框：1px实心#888；
宽度：25%；
最小宽度：470px；
边界半径：4px；
}

打开弹出窗口
弹出标题
弹出文本

您可以尝试以下方法：

要关闭按钮上的div，需要将其添加到
文档中，而不是添加
EventListner
。并在
target
上进行测试，如果按钮不是这样的：

    let popup = document.querySelector('.popup');
    let button = document.querySelector('button');



    // Event that hide the popin if the click happen out popin
    function closeHandler(e) {
        if (e.target !== popup) {
            // We remove the event for better perfermance
            removeCloseListner();
            // We hide the popin
            popup.style.display = 'none';
        }
    }

    // Call this function when you open your popin popin
    function addCloseLitnerToDocument() {
        document.addEventListener("click", closeHandler);
    }

    function removeCloseListner() {
        document.removeEventListener("click", closeHandler)
    }

    // Add listner to Open Popin
    button.onclick = (e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    // when popin is open
                    // Add listner to the document
                    // And show the popin
                    popup.style.display = 'block';
                    addCloseLitnerToDocument();
                }

如果只在弹出内容中添加单击事件，则需要将单击事件添加到容器div将隐藏事件绑定到后台单击并在子单击中停止传播。这太简单了！非常感谢。不客气，很高兴我能帮忙。