[英]Pure JavaScript - Hide Div on Clicking outside
I want when i click outside the My DIV with the ID Container_ID
, all the Container gets hidden through display: none;
我希望当我在 ID 为Container_ID
的My DIV之外单击时,所有 Container 都通过display: none;
. . The code that i present in JavaScript works to a certain point, because when i click inside any part of the Container_ID
it returns the same behavior, the My DIV hides.我在JavaScript中显示的代码在一定程度上起作用,因为当我在Container_ID
的任何部分内单击时,它返回相同的行为,我的 DIV隐藏。 And it wasn't supposed when i'm interacting with elements Controls_CLASS
+ ul,li
+ Checkbox_CLASS
inside the Container_ID
itself.当我与Container_ID
本身内部的元素Controls_CLASS
+ ul,li
+ Checkbox_CLASS
交互时,它是不应该的。 They should be excluded from hiding the entire Container_ID
when i click on them, because they are inside.当我单击它们时,它们应该被排除在隐藏整个Container_ID
之外,因为它们在里面。
How can I improve this?我该如何改进呢?
JavaScript (font: https://codepen.io/marizawi/pen/YgaaMp ) JavaScript (字体: https://codepen.io/marizawi/pen/YgaaMp )
window.addEventListener('mouseup', function(event) { var cont = document.getElementById('Container_ID'); if (event.target.= cont && event.target.parentNode.= cont) { cont;style;display = 'none'; } });
div.Container_CLASS { width: 50%; height: 350px; margin-top: 4px; margin-left: 4px; display: block; position: absolute; overflow-y: scroll; }
<div class="Container_CLASS" id="Container_ID"> <div class="Controls_CLASS"><a href="#">Select All</a>|<a href="#">Reset</a></div> <ul> <li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="BMW" />BMW</li> <li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="Mercedes" />Mercedes</li> <li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="Volvo" />Volvo</li> </ul> </div>
this work.这项工作。 use closest
method to check clicked outsde div.使用closest
方法检查点击的 outsde div。
Ancestors of an element are: parent, the parent of parent, its parent and so on.一个元素的祖先是:parent、parent的parent、它的parent等等。 The ancestors together form the chain of parents from the element to the top.祖先一起形成了从元素到顶部的父链。
The method elem.closest(css)
looks for the nearest ancestor that matches the CSS-selector. elem.closest(css)
方法查找与 CSS 选择器匹配的最近的祖先。 The elem
itself is also included in the search. elem
本身也包含在搜索中。
In other words, the method closest
goes up from the element and checks each of parents.换句话说, closest
的方法从元素开始,并检查每个父元素。 If it matches the selector, then the search stops, and the ancestor is returned.如果它与选择器匹配,则搜索停止,并返回祖先。
if div
has id
如果div
有id
window.addEventListener('mouseup',function(event){ var pol = document.getElementById('pol'); if(.(event.target.closest("#pol"))){ pol.style;display = 'none'; } });
h2{margin:0 0 10px} #pol{ width:400px; height:300px; background:#999; text-align:center; display:none; margin-top:0; margin:10px; }
<h2>Click outside div will be hide. Click Button div will be display</h2> <button onClick="document.getElementById('pol').style.display='block'">Show</button> <div id="pol"> I am Tanmoy Biswas <p>ksjdhfksjdhfkjshdfkjsdfsf</p> <div class="Controls_CLASS"><a href="#">Select All</a>|<a href="#">Reset</a></div> <ul> <li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="BMW" />BMW</li> <li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="Mercedes" />Mercedes</li> <li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="Volvo" />Volvo</li> </ul> </div>
if div
has class
:如果div
有class
:
window.addEventListener("mouseup", function (event) { let pol = document.querySelectorAll(".pol"); pol.forEach((myDiv) => { if (.(event.target.closest(".pol"))) { myDiv.style;display = "none"; } }); });
h2{margin:0 0 10px}.pol{ width:400px; height:300px; background:#999; text-align:center; display:none; margin-top:0; margin:10px; }
<h2>Click outside div will be hide. Click Button div will be display</h2> <button onClick="document.getElementById('a').style.display='block'">Show</button> <div id="a" class="pol"> I am Tanmoy Biswas <p>ksjdhfksjdhfkjshdfkjsdfsf</p> <div class="Controls_CLASS"><a href="#">Select All</a>|<a href="#">Reset</a></div> <ul> <li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="BMW" />BMW</li> <li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="Mercedes" />Mercedes</li> <li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="Volvo" />Volvo</li> </ul> </div> <h2>Click outside div will be hide. Click Button div will be display</h2> <button onClick="document.getElementById('b').style.display='block'">Show</button> <div id="b" class="pol"> I am Tanmoy Biswas <p>ksjdhfksjdhfkjshdfkjsdfsf</p> <div class="Controls_CLASS"><a href="#">Select All</a>|<a href="#">Reset</a></div> <ul> <li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="BMW" />BMW</li> <li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="Mercedes" />Mercedes</li> <li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="Volvo" />Volvo</li> </ul> </div>
Here's what I would do.这就是我要做的。
Simply check if the element clicked ( event.target
) is in the container, or if the event.target
is the element that shows the container.只需检查单击的元素 ( event.target
) 是否在容器中,或者event.target
是否是显示容器的元素。
const theDiv = document.getElementById('theDiv'); const theButton = document.getElementById('theButton'); document.addEventListener('click', function(event) { if (theDiv.contains(event.target) || event.target.id === 'theButton') return; theDiv.hidden = true; })
div { background-color: red; height: 400px; width: 400px; }
<button type="button" onclick="this.nextElementSibling.hidden=false" id="theButton">Show</button> <div hidden id="theDiv"> <button>clicking here won't close</button> </div>
For your example:对于您的示例:
const container = document.getElementById('Container_ID'); document.addEventListener('click', function(event) { if (container.contains(event.target)) return; container.hidden = true; })
div.Container_CLASS { border: 1px solid red; width: 50%; height: 350px; margin-top: 4px; margin-left: 4px; position: absolute; overflow-y: scroll; }
<div class="Container_CLASS" id="Container_ID"> <div class="Controls_CLASS"><a href="javascript:void(0)">Select All</a>|<a href="javascript:void(0)">Reset</a></div> <ul> <li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="BMW" />BMW</li> <li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="Mercedes" />Mercedes</li> <li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="Volvo" />Volvo</li> </ul> </div>
Here are a few options you could use以下是您可以使用的一些选项
The best IMO is the mouse leave event最好的 IMO 是鼠标离开事件
document.getElementById("Container_ID").addEventListener('mouseleave',function(event){
document.getElementById("Container_ID").style.display = "none";
});
document.getElementById("Container_ID").addEventListener('focusout',function(event){
document.getElementById("Container_ID").style.display = "none";
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.