单击外部 div 以隐藏纯 JavaScript 中的 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33060993/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Click outside div to hide div in pure JavaScript
提问by Henrique Braun
I want to make a popup that should appear once a button is clicked and disappear once the user clicks outside of the box.
我想制作一个弹出窗口，该弹出窗口应在单击按钮后出现，并在用户单击框外时消失。
I'm not sure how to make the div disappear when I click outside of it.
当我在它外面单击时，我不确定如何使 div 消失。
var popbox = document.getElementById("popbox");
document.getElementById("linkbox").onclick = function () {
popbox.style.display = "block";
};
???.onclick = function () {
popbox.style.display = "none";
};
回答by www139
Here is the second version which has a transparent overlay as asked by the asker in the comments...
这是第二个版本，它有一个透明的覆盖层，正如提问者在评论中所问的那样......
window.onload = function(){
var popup = document.getElementById('popup');
var overlay = document.getElementById('backgroundOverlay');
var openButton = document.getElementById('openOverlay');
document.onclick = function(e){
if(e.target.id == 'backgroundOverlay'){
popup.style.display = 'none';
overlay.style.display = 'none';
}
if(e.target === openButton){
popup.style.display = 'block';
overlay.style.display = 'block';
}
};
};#backgroundOverlay{
background-color:transparent;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
display:block;
}
#popup{
background-color:#fff;
border:1px solid #000;
width:80vw;
height:80vh;
position:absolute;
margin-left:10vw;
margin-right:10vw;
margin-top:10vh;
margin-bottom:10vh;
z-index:500;
}<div id="popup">This is some text.<input type="button" id="theButton" value="This is a button"></div>
<div id="backgroundOverlay"></div>
<input type="button" id="openOverlay" value="open popup">Here is the first version...
这是第一个版本...
Here is some code. If there is anything else to add, please let me know :)
这是一些代码。如果还有什么要补充的，请告诉我：）
The event (e) object gives access to information about the event. e.target gives you the element that triggered the event.
事件 (e) 对象可以访问有关事件的信息。e.target 为您提供触发事件的元素。
window.onload = function(){
var divToHide = document.getElementById('divToHide');
document.onclick = function(e){
if(e.target.id !== 'divToHide'){
//element clicked wasn't the div; hide the div
divToHide.style.display = 'none';
}
};
};<div id="divToHide">Click outside of this div to hide it.</div>回答by Mohit Singh Negi
Here is my Solution.
这是我的解决方案。
yourFunc=e=>{
var popbox = document.getElementById("popbox");
if(e.target.id !=="popbox"){
popbox.style.display = "none";
}else{
popbox.style.display = "block";
}
}
document.addEventListener("click",yourFunc)
回答by Mohit Singh Negi
hope this will work for you
希望这对你有用
<script>
// Get the element
var modal = document.getElementById('modal');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
This code is tested and it's working nicely, thank you.
这段代码已经过测试，运行良好，谢谢。
回答by sebjwallace
el.onmouseleave = function(){
document.body.onclick = function(){
el.style.display = 'none';
document.body.onclick = null;
}
}
回答by David Li
Okay, here's a jQuery based solution based on any div clicked within the DOM.
好的，这是一个基于 jQuery 的解决方案，它基于在 DOM 中单击的任何 div。
$('div').on('click', function(e){
var parents = $(e.currentTarget).parents();
for (var i = 0; i < parents.length; i++) {
if (parents[i].id === 'divToHide' || e.currentTarget.id === 'divToHide') {
// you are in the popup
};
}
e.stopPropagation();
});
This looks at your current element, as well as any of the parents, and checks if the id matches up. If divToHide is in the parents() list, then you keep the popup open.
这会查看您当前的元素以及任何父元素，并检查 id 是否匹配。如果 divToHide 在 parents() 列表中，那么您将保持弹出窗口打开。
*NOTE: This requires wrapping your content within a wrapper div or something similar.
*注意：这需要将您的内容包装在包装器 div 或类似的东西中。
