jQuery onClick on Custom Context Menu

Question

I have a custom right click context menu that is displayed when the page is right clicked. After a right click event, if the user clicks on the page then the context menu is hidden. The problem I need resolved is if the user clicks on the context menu (to select a drop down) then the context menu is hidden by the jQuery onClick event. Is there any way to identify the div of the element being clicked so that I can then decide whether or not to hide the menu from there?

    $('body').on('contextmenu', options.contextMenu.graphName, function (event) {
        showContextMenu(event);
    });
    $(document).bind('click', function (event) {
        //if(event.targetDiv.id != '#graphMenu') <- Is something like this possible?
               $('#graphMenu').hide();
    });

Answer 1

There are some ways to achieve that, but the best I know is by adding a flag when the menu is hovered and removing it when the mouse goes out the menu:

$('#graphMenu')
  .mouseenter(function(e) {
    $(this).data('hovered', true);
  })
  .mouseleave(function(e) {
    $(this).data('hovered', false);
  });

$('body').on('contextmenu', options.contextMenu.graphName, function (event) {
  showContextMenu(event);
});

$(document).bind('click', function (event) {
  if (!$('#graphMenu').data('hovered'))
    $('#graphMenu').hide();
});