Question

I made a very simple dropdown using a <div> (parent), <span> (current selection) and <ul> (options).
It works fine. What I now want to do is if the user clicks anywhere on the page, have it close, like a “real” <select> element.

What I do now is this:

$(document).delegate('body','click',function(){
   if(isExpanded){close();}
});

And it works. What I am worried about is performance. Is it wise to listen for click events on the document node? Is there a better way?

Thank you.

Answer 1

You could also make use of the blur event. While your elements don’t support it by default, adding tabindex=... makes them fire the blur event: http://jsfiddle.net/UgSTa/.

HTML:

<div tabindex="1">
    <ul>
        <li>1</li>
        <li>2</li>
        <li><span>3</span></li>
    </ul>
</div>

JavaScript:

$('div').blur(function(){alert(1)})