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

Can you make a fiddle so we can see the code in action?

Robert430404
– Robert430404

2015-09-16 20:29:21 +00:00
Commented Sep 16, 2015 at 20:29 — Robert430404
– Robert430404, Commented Sep 16, 2015 at 20:29

Buzinas · Accepted Answer · 2015-09-16 20:31:57Z

3

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

answered Sep 16, 2015 at 20:31

Buzinas

11.8k2 gold badges38 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Buzinas Over a year ago

@TheyCallMeSam So, please, click in the arrow to upvote my answer, and then click in the V to accept it :)

Alexandr Lazarev · Accepted Answer · 2015-09-16 20:32:42Z

0

Try:

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

answered Sep 16, 2015 at 20:32

Alexandr Lazarev

13k4 gold badges40 silver badges47 bronze badges

Collectives™ on Stack Overflow

jQuery onClick on Custom Context Menu

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related