CODEWITHSUNDEEP
javascriptjqueryhtml
TheyCallMeSam
TheyCallMeSam

Reputation: 143

jQuery onClick on Custom Context Menu

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();
    });

Upvotes: 4

Views: 2096

Answers (2)

Alexandr Lazarev
Alexandr Lazarev

Reputation: 12892

Try:

$('body').on('contextmenu', options.contextMenu.graphName, function (event) {
    showContextMenu(event);
});
$(document).bind('click', function (event) {
    if(event.target.id != '#graphMenu') {
           $('#graphMenu').hide();
    }
});

Upvotes: 0

Buzinas
Buzinas

Reputation: 11733

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();
});

Upvotes: 3

Related Questions