Pure JavaScript - Hide Div on Clicking outside

user_8412359 0
Viewed 503

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>

css javascript
3 Answers

this work. use closest method to check clicked outsde div.

closest

Ancestors of an element are: parent, the parent of parent, its parent and so on. 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. The elem itself is also included in the search.

In other words, the method closest goes up from the element and checks each of parents. If it matches the selector, then the search stops, and the ancestor is returned.
if div has 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 :

 

    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>

user_107497260

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>

user_37443040

Here are a few options you could use

The best IMO is the mouse leave event

On Mouse Leave

document.getElementById("Container_ID").addEventListener('mouseleave',function(event){
    document.getElementById("Container_ID").style.display = "none";
});

On Focus Out

document.getElementById("Container_ID").addEventListener('focusout',function(event){
    document.getElementById("Container_ID").style.display = "none";
});
user_66518400
Related