Javascript 在div外部单击以关闭Event.target时，Event.target不工作

我有一个主div和子div，也称为form，因为form被包装在div中。我想在主div之外单击时关闭表单，但它根本没有发生。请帮我解决这个问题

var btn=document.getElementById（'opener'）；
var-box=document.getElementById（'abc'）；
var form=document.getElementById（'def'）；
btn.onclick=函数（）{
box.style.display=“block”；
}
//不起作用。它的功能是在div外部单击时关闭表单。
window.onclick=函数（事件）{
如果（event.target==box）{
form.style.display=“无”；
}
}

#abc{
显示：无；
背景色：#F44336；
}

打开
欢迎光临



电子邮件或用户名：


密码：

您的代码工作正常，唯一的问题是您需要使用按钮和弹出窗口的

e.stopPropagation（）

来阻止单击事件传播，这将产生所需的效果！请参考我下面的代码片段

#def{
  border:1px solid black;
}
#abc{
  padding:40px;
}

var btn=document.getElementById（'opener'）；
var-box=document.getElementById（'abc'）；
var form=document.getElementById（'def'）；
btn.onclick=函数（e）{
e、 停止传播（）；
box.style.display=“block”；
}
box.onclick=函数（e）{
e、 停止传播（）；
}
//不起作用。它的功能是在div外部单击时关闭表单。
window.onclick=函数（事件）{
box.style.display=“无”；
}

#abc{
显示：无；
背景色：#F44336；
}
#def{
边框：1px纯黑；
}
#abc{
填充：40px；
}

打开
欢迎光临



电子邮件或用户名：


密码：

窗口。onclick

在某些浏览器上不起作用。试试

document。改用onclick

。

我知道这不是你要问的，但你能做一个切换按钮吗？这对用户来说更容易做到，也更明显

var btn=document.getElementById（'opener'）；
var-box=document.getElementById（'abc'）；
var form=document.getElementById（'def'）；
btn.onclick=函数（e）{
如果（e.target.innerHTML=='Open'）{
box.style.display=“block”；
e、 target.innerHTML=“关闭”
}否则{
box.style.display=“无”；
e、 target.innerHTML=“打开”
}
}
//不起作用。它的功能是在div外部单击时关闭表单。
window.onclick=函数（事件）{
如果（event.target==box）{
form.style.display=“无”；
}
}

#abc{
显示：无；
背景色：#F44336；
}

打开
欢迎光临



电子邮件或用户名：


密码：

您是否有

窗口的参考。单击
不工作？即使这是真的，这也不是真正的问题，切换到
document
也无济于事在单击处理程序中，您将看到问题。请查看-->感谢@UncaughtTypeError提供的答案。但问题已经解决了：黛雅，我来晚了一点：（但在DIV外单击时仍不关闭。仅在单击填充区域时关闭。@John OP似乎只想在
event.target==box
时关闭。单击该选项的唯一方法是单击填充。就是这样！谢谢@NarenMurali和Barmer@Barmar谢谢你的提示！对不起，这不是我想要的东西谢谢你的回答。另外，要做到这一点，我们不必像你那样键入长代码。只需创建一个CSS类并通过Javascript切换即可：）是的，这只是一个简单的示例，甚至无法正常工作：D