jQuery event problem when implementing contextmenu?

Question

When the contextmenu is shown,

if the user clicks out of the contextmenu,

should hide it.

How to implement this functionality?

Is it possible to listen for click_out,and when it's detected,hide contextmenu and clear that listener?

Answer 1

You could add an onclick handler to the document and then check if the event target is the menu or not. If the click is on the menu, do nothing, if not hide it.

jQuery(document).click(function(event) {
  if(event.target==$('context-menu'){
    $('context-menu').hide();
    $(this).unbind('click');
  }
}):

Answer 2

You can bind to the body.click to hide it. Any click event on any other element bubbles up to the body eventually:

$('body').click(function() {
   $('#menu').hide();
});

Above example is assuming your custom menu has the ID of 'menu'. Replace as needed.

Depending on how your menu works (if you have nested menus you can click to open) you might want to bind something to the clicks inside it to stop the event using e.stopPropagation();

To clear the listener you can do:

$('body').click(function() {
   $('#menu').hide();
   $(this).unbind('click');
});

Answer 3

Here is a snippet of some working code:

document.onclick = Tree.hideContext;

    Tree = {
        hideContext: function() {
            $("#context").hide();
        }
    }