Hiding div with Javascript

Question

I'm trying to hide a div when the user clicks anywhere outside of the div with id "main".

I am using vanilla Javascript and would prefer not to use jQuery.

The code I have works well but whenever the user clicks inside sub-child div or any

text, it also hides the div, which is not the behavior that I want.

window.addEventListener('mouseup', function(event){
 var box = document.getElementById('main');
 if (event.target != box && event.target.parentNode != box){
        box.style.display = 'none';
    }
});

<div id="main" style="display: block; background-color: grey;">

<div id="one1">
<div id="one2" style="background-color: red;"><p>when click here should not hide<br><br>when click here should not hide<br>when click here should not hide<br>when click here should not hide</p></div>

</div>
<div id="one3"><p>when click here should not hide</p></div>


</div>
<p>when click here should hide</p>
<div id="xyz" style="background-color: green;"><p>when click here should hide</p></div>

<p>when click here should hide</p>

score 4 · Answer 1 · answered Apr 15 '17 at 09:05

Hi, hopefully I've understood your question correctly.

When you click on the green and transparent lines you want to hide everything? Or just the div 'main'?

Currently your javascript is adding an event listener 'mouseup'. The event listener's function has an if statement checking to see if you target the 'main' div. The elements that you want to activate the function when clicked, are not in the main div. Your DOM tree is not organised correctly!

I've taken the liberty to adjust your code slightly to what I think you wanted to achieve... Here is a jdFiddle.

jsFiddle

You can also combine the event listener and getElementById with this line of code:

document.getElementById('clickToHide').addEventListener('mouseup', function(event){

This may be an easier method for you to make sure you are pointing to the correct div. Let me know if I got the wrong end of the stick.

The post said he wanted it to respond to clicks outside of the main div. — jaredsk, Apr 15 '17 at 09:14
I'm sorry dear but my DOM tree is organised correctly! and as jaredsk have answered i wanted the same. when user click anywhere out side of Main div. it should hide only main div. not all the div. but anyway thx — Archi Patel, Apr 15 '17 at 09:17

score 2 · Accepted Answer · edited May 23 '17 at 11:46

2

You can add a separate listener on the Main div to stop propagation of that event:

window.addEventListener('click', function(event){
    var box = document.getElementById('main');
    box.style.display = 'none';
});

var box = document.getElementById('main');
box.addEventListener('click', function(event) {
    event.stopPropagation();
});

Fiddle: https://jsfiddle.net/jaredk/bu5cjh9v/

This is from an answer here, but that one uses jQuery.

edited May 23 '17 at 11:46

Community

1
1

answered Apr 15 '17 at 08:53

jaredsk

2,617
2
18
18

just 1 question i can use this in dropdown menu code also ? inside nav ? so when user clicks anywhere outside dropdown menu "li" dropdown menu will close auto ? right ? and again i was wondering would it be more heavy to fire a window event listener everytime user clicks on page ? isn't any option when only div main is block then only javascript windows listener gets active ? – Archi Patel Apr 15 '17 at 09:23
I'm not sure I understand.The code should work for a navbar. In that case, you might want to add the event listener when the navbar is opened, then remove it when it closes. That way you're not listening for every click on your site when the navbar isn't even open. (Also, if my answer was helpful please mark it as accepted, thanks!) – jaredsk Apr 15 '17 at 09:32

Hiding div with Javascript

2 Answers2