How is a click outisde of an element detected ?

Question

In the jQuery autocomplete/menu widget (the autocomplete widget is based on the menu widget, which is a still unreleased widget), how is a click outside of the menu detected ? (A click outisde of the menu closes the menu)

I have added a srollbar (similar to the classic select element) to that menu in a custom combobox widget I am writing. The problem is that in IE8, a mousedown on the scrollbar is detected as a click outside the menu, which closes it, making the scrollbar useless. So, to work around this issue, I am first trying to understand how the menu widget works.

Answer 1

It would be easier to dismiss the menu not after a click but if the mouse leaves the menu (after a short grace-period).

Answer 2

I would implement it by utilize event bubbling:

$(document).bind('mousedown', function(e){
     if(e.target.id === 'foobar'){
         // do something
     }
});

But what do I know...

Answer 3

You can view the source here, it's basically just checked when it's blur event fires, and hiding 150 seconds after, if the click wasn't in the menu portion:

.bind( "blur.autocomplete", function( event ) {
  clearTimeout( self.searching );
  // clicks on the menu (or a button to trigger a search) will cause a blur event
  self.closing = setTimeout(function() {
    self.close( event );
    self._change( event );
  }, 150 );
});

Other areas of autocomplete, e.g. the selection menu itself clear this timeout, preventing the hide...a blur caused by something else doesn't, resulting it in being hidden. It's worth noting this is not the way for you to replicate the behavior, there are better ways by preventing bubbling, but if your goal is to understand this widget specifically...well that's what it does :)