OnClick event for whole page except a div

Question

I'm working on an own combobox control for ASP.Net which should behave like a selectbox, I'm using a textbox, a button and a div as a selectbox replacement. It works fine and looks like this Image:

My problem now is the Selectbox close behaviour: when clicking anywhere outside the opened selectbox it should close.
So I need something like an onClick event for the whole page which should only fire when my div is open. Any suggest how to do that?

Answer 1

Put a transparent div that covers whole the page and lies under your dropdown. At that div's click event hiğde your dropdown.

Answer 2

Add a click event handler to document. In the event handler, examine its target (or srcElement in IE) property to check that it isn't your open div or any of its descendants.

Answer 3

document.onclick = function() {
    if(clickedOutsideElement('divTest'))
        alert('Outside the element!');
    else
        alert('Inside the element!');

}

function clickedOutsideElement(elemId) {
    var theElem = getEventTarget(window.event);

    while(theElem = theElem.offsetParent) {
        if(theElem.id == elemId)
            return false;
    }

    return true;
}

function getEventTarget(evt) {
    var targ = (evt.target) ? evt.target : evt.srcElement;

    if(targ && targ.nodeType == 3)
        targ = targ.parentNode;

    return targ;
}

Answer 4

Set a click event handler on the document that "closes" the pseudo-combobox. In addition, set a click event handler on the pseudo-combobox's container (the div, in this case) which cancels bubbling of the event. Then any clicks in the div will bubble up only as far as the div before being halted, while clicks anywhere else will bubble all the way up to the document.

This is a much easier option than mucking around traversing the DOM from the event's target upwards to work out where the click came from.

EDIT: if you are setting the div's style to display: none; (or something similar) to hide it, then it doesn't matter if you leave the event handler on the document - hiding it when it's already hidden will have no effect. If you want to be very tidy, then add the event listeners when the div is shown, and remove them when it is hidden; but there's probably no need to bother.