How do I hide a div if the user clicks outside of the div?

Question

I have a button which, when clicked, changes the visibility of a div as such:

<button type="button" id="editbutton" onclick="plus()" alt="Edit"></button>

function plus() {
var f = document.getElementById('edit');
if (f.style.visibility == 'hidden') {
   f.style.visibility = 'visible';
   }
else
    f.style.visibility = 'hidden';
}

This works fine. But now I want to add the functionality so that if the user clicks anywhere outside of the div, the div will go back to being hidden.

Initially I tried my own methods, but was unsuccessful because whenever I click the button to make the div visible, it is made hidden again by the new code. I've looked into some of the jQuery examples others have posted, however none of the ones I have tried fix this problem. Any help would me much appreciated.

EDIT: To clarify, the issue is that because the div is initially made visible by the user clicking on a button, whenever I click the button, the div is made visible but is immediately hidden again because that counts as clicking on the body of the page.

[This post](http://stackoverflow.com/questions/2060354/detect-background-click-in-jquery) should be helpful. — Vincent Ramdhanie, Oct 13 '12 at 23:48
I wonder what problem you're trying to solve? What does the div contain? Also, you've tagged the post `Jquery` and your whole code snippet could be switched for `$("#buttonToClick").click(function() { $(".edit").toggle(); });` — Jan, Oct 13 '12 at 23:49
@Jan - I'm going to change that up for jQuery later on. But for now I wanted to keep it as simple as possible in order to isolate the problem. — fvgs, Oct 13 '12 at 23:55

score 3 · Accepted Answer · edited Oct 14 '12 at 01:03

3

You could call 'e.stopPropagation()' on the event from within your click event handler when a user clicks within your div - this will stop the event from 'bubbling' up the DOM.

And then if you attach an event handler to the BODY element listening for clicks, you can use that event handler to hide the DIV; knowing that a click on the DIV itself won't bubble the event up to the BODY handler.

In this way any click on another element, unless the handler also calls stopPropagation(), will get caught by your handler. So if there are other cases where you don't want the div to hide you can stop it happening by calling stopPropagation() as required.

E.g.:

$("#edit-button").click( function(e) {
    $("#edit").toggle();
    e.stopPropagation();
});

$('#edit').click(function(e) {
    e.stopPropagation();
});

$("body").click( function(e) {
    $("#edit").hide();
});

edited Oct 14 '12 at 01:03

fvgs

21,412
9
33
48

answered Oct 13 '12 at 23:49

sync

5,350
2
23
32

Added an example. You'll need to fix the ID of 'edit-button' though. Untested but should work ;) – sync Oct 13 '12 at 23:59
I tried this, however the div won't even appear now. I changed the var names as needed and there are no extenuating factors in the rest of the code. I'm not particularly strong with jQuery, so perhaps I'm missing something important/obvious? – fvgs Oct 14 '12 at 00:09
1

Ah ok, in the css I changed it from `visibility: hidden` to `display: none` and now the code works. Also had to change #body -> body and show() -> toggle(). Thanks for the help. – fvgs Oct 14 '12 at 00:22
Upon further analysis, this isn't working as I hoped it would. =/ For it to work, I'm having to use the onclick attribute of the button with a function containing the above code. As a result, I'm having to double and even triple click the button for anything to happen. Furthermore, when I click inside the div the div gets hidden which shouldn't be happening. – fvgs Oct 14 '12 at 00:39
Alright, I managed to get it working properly. You forgot to add the click event handler for when clicking inside the div. I edited in your code above. Thanks again. – fvgs Oct 14 '12 at 00:57

score 0 · Answer 2 · answered Oct 13 '12 at 23:49

Set a click handler on the body element. In the event you can check event.target to see if it matches the div, if it does: do nothing, else: hide it.

document.body.onclick = function(event) {
    if (event.target === f) {
        // user clicked on the div, do nothing
    } else {
        f.style.visibility = "hidden";
    }
};

This becomes a bit more complex if you have elements within the edit div (and the .target doesn't match), but I'm sure you can come up with a solution :) (it can be done).

I have a form in the div with input elements and a submit button. If the user clicks in one of the text inputs, would this still work? That is, will the div remain visible? — fvgs, Oct 14 '12 at 00:00

score -1 · Answer 3 · answered Oct 13 '12 at 23:50

you seem like you know what you're doing so I'll keep it short.

write a .click function in jquery.

you give your button an id (or the div it is in)

$('#buttonidordiv').click(function(){
 $('#divtoshow').show() // put in a number to create a fade in seconds.
//your stuff here
}

and if someone clicks anywhere outside it... I think you should be able to use window. Else you can use another div (like your wrapper).

so

$('window').click(function(){
$('#samediv').hide() //same as above
//your stuff here

}

do realize, I suck with the )}; so you might have to add one of those somewhere ;)

best of luck!

How do I hide a div if the user clicks outside of the div?

3 Answers3