I want when i click outside the My DIV with the ID Container_ID , all the Container gets hidden through 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. And it wasn't supposed when i'm interacting with elements Controls_CLASS + ul,li + Checkbox_CLASS inside the Container_ID itself. They should be excluded from hiding the entire Container_ID when i click on them, because they are inside.
How can I improve this?
JavaScript (font: 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>Here are a few options you could use
The best IMO is the mouse leave event
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";
});
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.
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>