Close a Div element if you click outside of it

Question

I need a function that hide the div if i click outside of the div area ? I have defined a Div on Position: none, which I make visible by using the following function:

My Div:

<div id="TopBarBoxInfo1" onclick="showSerachOptions('BoxBox');" >



</div>

My function:

function showSerachOptions(element){

var element = document.getElementById(element);


// And then it will change what it is
if(element.id == 'Box'){

    if(element.style.display == 'none'){

        element.style.display = 'block';

    }
    else{

        element.style.display = 'none';

    }
}
}

Now I would need a function, which allows to close the div if you click with the mouse pointer outside of the area of the div. Please describe your solution in detail, because I am a beginner!

possible duplicate of [Click outside menu to close in jquery](http://stackoverflow.com/questions/2868582/click-outside-menu-to-close-in-jquery) — Jay, Dec 11 '13 at 09:38
This question appears to be off-topic because it is not written in English — TCHdvlp, Dec 11 '13 at 09:47

David Hölkeskamp · Answer 1 · 2013-12-11T12:24:16.143

Since being registered doesn't mean knowing the rules i'm going to answer your question BUT you should always ask in english.

var body = document.getElementsByTagName('body')[0];
body.click = function(e){
//here you can get e.target as the click-target-element or
// e.srcElement(Microsoft) as the click-target-element
//than you can handle what you want to do since e.target/srcElement will give you
// an element (just like document.getElementById
}

remember the .click may not be the best way - addEventListener would be much better afaik

Close a Div element if you click outside of it

1 Answers1