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.

Answer 1

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();
});