Question

I have a button that when clicked will popup a menu to the right of the button. This menu is a rather large UL of list items. The page that this menu is on contains lots of other elements.

Once the menu pops up, a user can click an option on the menu and the menu will disappear (menu.hide()).

However, it feels wierd not being able to get rid of the menu any other way. I like the idea of “if the user clicks on anything but the menu, the menu will hide.” But i hate doing a “clickoutside” event that binds events to everything but the menu.

Another option is “mouseout” but “mouseout” always gets fired too early, because the mouse has to travel across the screen to get to the menu.

Any ideas on what event I can bind to the menu, so the user can get rid of it naturally, and at will? (not just when he clicks an option)

Answer 1

You can bind one event to the body when the menu is open. Use the click event to determine if the click occurred outside of the menu. If outside of the menu, hide the menu and remove the bind.

// binding function     
closeMe = function(e) {
    var $target = $(e.target);
    // click is not inside the menu
    if(!$target.hasClass('menu') && $target.parents('.menu').length !== 1) {
        // hide menu
        menu.hide();
        // unbind events
        $('body').unbind('mousedown.menuhide', closeMe);
    }
};
// show menu
menu.show(function() {
    // bind menu hide event
    $('body').bind('mousedown.menuhide', closeMe);
});