Layer Lost Focus

Question

I'm coding a combo box of sorts right now. While I've gotten as far as to show a div layer at a particular location after clicking an image, I'm not sure how to hide the layer if I click on ANY OTHER part of the webpage. Like a dropdown list works when it loses focus.

I'm trying to duplicate the functionality seen here: http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/templates/defaultcs.aspx

Can anyone point me in the right direction?

Answer 1

Handle the click event on the whole document, and within it hide all the menus. Then on your combo box, stop propogation on the click event...

 $(document).click(function() {
   //Hide all visible menus
 });

 $(".comboBox").click(function(e){
     e.stopPropagation();
 });

More info on stopPropagation.

Answer 2

Assign an event listener to the click event of the document object. It won't work just as well if you assign it to the body. The document element actually expands to the whole view port, which is not necessarily true for the body element.