JQuery : Click Everywhere But Some Element?

Question

I have a textbox and a div below it. I want to hide the div when the user clicks outside the textbox or div.

Is there any other way other than document.click to handle that user has clicked outside. Because in some of the controls, event.stoppropagation is given, which on click wont trigger the document click event.

Thanks

Answer 1

// This means if you click anywhere on the document once, it'll hide the div
$(document).one("click", function() {/*Do stuff, hide div*/});
// This overrides the previous line for just the textarea and div, therefore making this block of code only apply to everything but the textarea and div
$('textbox, div').click(function(){return false;});

Answer 2

Create an overlay div (see other questions) and then add a click event to the overlay div that hides the div below the text box and destroys the overlay div.

Answer 3

<script type="text/javascript">
    hideDiv()
    {
         document.getElementById("divId").style.display = "none";
    }
</script>


<input type="text" onblur='javascript:hideDiv()'>

I think this should work.

Answer 4

Since you mentioned you have event.stopPropagation() at different sections of the page on click event so document.click will not work to hide the textbox.

Why don't you use document.mousedown? It will work fine.

$(document).mousedown(function(){
    $('textboxSelector').hide();
});

Make sure you stop the mousedown event propagation from textbox and its containing div.