JavaScript Magic: Hide Div when Clicking Away

Question

JavaScript Magic: Hide Div when Clicking Away

I need a solution where clicking outside of the My DIV with the ID Container_ID will hide all elements within the Container by setting their style to display: none;. Currently, the JavaScript code I am using partially achieves this functionality, but it also hides the My DIV when clicking inside any part of the Container_ID. This is not the intended behavior, especially when interacting with elements like Controls_CLASS, ul, li, or Checkbox_CLASS within the Container_ID itself. These elements should not trigger the hiding of the entire Container_ID when clicked, as they are part of the container.

Is there a way to improve this functionality?

JavaScript (source: 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>

javascript css

Answer 1

Answer №1

To implement this feature, the closest method is used to verify if a click occurred outside of a specified div.

closest

An element's ancestors include its parent, the parent's parent, and so forth, forming a series of parents leading to the top.

The elem.closest(css) method searches for the closest ancestor that matches the CSS selector. The element elem itself is also part of the search.

In essence, the closest method moves up from the element and examines each parent. When a match is found, the search ends, and the ancestor is returned.

If a div has an 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 a div has a 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>

Answer 2

To implement this feature, the closest method is used to verify if a click occurred outside of a specified div.

closest

An element's ancestors include its parent, the parent's parent, and so forth, forming a series of parents leading to the top.

The elem.closest(css) method searches for the closest ancestor that matches the CSS selector. The element elem itself is also part of the search.

In essence, the closest method moves up from the element and examines each parent. When a match is found, the search ends, and the ancestor is returned.

If a div has an 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 a div has a 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>

Answer 3

Answer №2

Here is my approach:

To determine whether the clicked element (event.target) is within the container or if it is the element triggering the container display, you can use the following code:

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 specific case:

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>

Answer 4

Here is my approach:

To determine whether the clicked element (event.target) is within the container or if it is the element triggering the container display, you can use the following code:

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 specific case:

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>

Answer 5

Answer №3

Consider these various choices for implementation

In my opinion, the optimal solution is utilizing the mouse leave event

Triggered by Mouse Leave

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

Triggered by Focus Out

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

Answer 6

Consider these various choices for implementation

In my opinion, the optimal solution is utilizing the mouse leave event

Triggered by Mouse Leave

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

Triggered by Focus Out

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

JavaScript Magic: Hide Div when Clicking Away

Answer №1

closest

Answer №2

Answer №3

Triggered by Mouse Leave

Triggered by Focus Out

Similar questions

Troubleshooting IE compatibility issues with jQuery .hide() method

What should I do when using _.extend() in express - override or add in fields?

Display the table upon completion of the form submission

Tips for concealing overlay when the cursor hovers

The initial Ajax request returned an empty data string, but upon retrying, the correct data

What specific files from the Kendo core are required for utilizing Mobile and Angular functionalities?

Create a path on the Google Map that follows the designated route

Infinite loop readiness with JQuery

Using the Proper 'this' Reference Without Repeating 'this' in Nested Functions

Issue with Chrome Browser Border Radius Bug when applied to element with Display: Table

Customize the font color in Material UI to make it uniquely yours

There was an issue with the Google Maps embed API that resulted in an error with interpolation

Leveraging Material-UI: Utilize props in useStyles method while employing Array.map()

The callback function is unable to access this within the $.post method

Node.js reads and writes a JSON file, encountering issues with another application in the process

Handling TextChanged Event of a TextBox in ASP.NET using C#

Creating a function that writes to a file by utilizing the data input from

What is the best way to create a list from a matrix using JavaScript?

Receiving NaN in javascript when attempting to calculate the sum using a text input field

Off Canvas left navigation menu using Bootstrap