Javascript 如何在单击div外部时隐藏div？

我试图使“表单”仅在以下条件下单击另一个“按钮”后可见：

• 只有单击“按钮”，才能看到“表单”
• 如果您单击表单的“外部”或再次单击按钮：表单将再次隐藏

/*JAVASCRIPT*/
const outer=document.getElementById（'outer'）；
const inner=document.getElementById（'inner'）
outer.onclick=函数（）{
if（internal.style.visibility==“visible”）{
document.getElementById（'inner'）.style.visibility='hidden'；
}否则{
document.getElementById（'inner'）.style.visibility='visible'；
}
}
const ignoreClickOnMeElement=document.getElementById（'inner'）；
document.addEventListener（'click'，函数（事件）{
const isClickInsideElement=ignoreClickOnMeElement.contains（event.target）；
如果（！isClickInsideElement）{
//当取消注释下面的行时，所有内容都停止工作，而不是在这个div之外单击就关闭
/*document.getElementById（'inner'）.style.visibility='hidden'*/
}
});
/*CSS*/
* {
边框：薄而实的黑色；
}

看得见的
如果使用绑定到更高节点（如本例中的文档正文）的
委托事件侦听器，则可以根据事件目标确定已单击哪些元素


let form=document.getElementById（'form'）；
让bttn=document.querySelector（'div.outer button'）；
document.body.addEventListener（'click'，e=>{
e、 预防默认值（）；
e、 停止传播（）；
if（（e.target==bttn&&form.parentNode.style.visibility！='visible'）| | e.target==form | | e.target.parentNode==form）{
form.parentNode.style.visibility='visible'
}否则{
form.parentNode.style.visibility='hidden'
}
})
*{
边框：薄而实的黑色；
}
形式{
高度：100px；宽度：80%；背景：粉红色
}
.内部{
高度：200px；宽度：100%；
}
.外部{
宽度：100%；高度：100px；
}

看得见的
只是一个想法。。。您是否尝试向正文或整个文档添加侦听器？在侦听器事件中，您必须检查哪个元素（目标）被命中，如果它不是您的表单，您将隐藏表单div。