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

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

Answer 2

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.