hiding the context menu at onblur event in jquery

Question

Does any one tried to successfully hide the context menu at blur event? What I want to do is to hide the customized right click menu when the mouse is not positioned inside the context menu div.

This uses the jquery context menu plugin.

Answer 1

You mention the blur event explicitly, but I don't think that's actually what you need, since the context menu div you mentioned probably will not ever be focused or blurred.

You should use the mouseout event:

Assuming your context menu has an id of 'contextMenuContainer', this should cover it:

$('#contextMenuContainer').mouseout(function() {
    $(this).hide();
});

For more see the jQuery Events/mouseout documentation.

Update:

I tried registering a mouseout event handler on the plugin page you linked to, and it was firing just fine. I should note that it fires every time you change menu items though, so you'll need to check the event target to make sure the mouse has actually exited the entire menu.

Answer 2

If you want to know when the focus leaves the area of the container, but not have child controls inside the container trigger an event, use mouseleave.

$('#menu').on('mouseleave', function(){
  $(this).hide();
});

mouseout or blur is not what you need in this scenario, because they will trigger when any child control inside the container receives mouse focus, causing the menu containing them to hide.

Answer 3

Use blur with a callback. It is not tested though. Do you want to restore the right click functionality on other blur? I think this will be better executed on other types of events.

$("input").blur(function () {
     window.oncontextmenu = function () {
        return false;
     }
});