jquery - 在 jquery 的 onblur 事件中隐藏上下文菜单

Question

有没有人试图在blur事件中成功隐藏上下文菜单？我想要做的是当鼠标不在上下文菜单内时隐藏自定义的右键菜单div。

这使用 jquery 上下文菜单插件。

score 1 · Accepted Answer

如果您想知道焦点何时离开容器区域，但容器内的子控件不触发事件，请使用mouseleave.

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

mouseout或者blur在这种情况下不是您需要的，因为它们会在容器内的任何子控件接收到鼠标焦点时触发，从而导致包含它们的菜单隐藏。

score 0 · Accepted Answer

将模糊与回调一起使用。虽然它没有经过测试。你想恢复其他模糊的右键功能吗？我认为这将在其他类型的事件中更好地执行。

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

score -1 · Accepted Answer

您blur明确提到了该事件，但我认为这实际上并不是您需要的，因为div您提到的上下文菜单可能永远不会被聚焦或模糊。

您应该使用 mouseout 事件：

假设您的上下文菜单的 id 为“contextMenuContainer”，这应该涵盖它：

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

有关更多信息，请参阅jQuery 事件/mouseout文档。

更新：

我尝试在您链接到的插件页面上注册一个 mouseout 事件处理程序，并且它触发得很好。我应该注意，每次更改菜单项时都会触发它，因此您需要检查事件目标以确保鼠标实际上已退出整个菜单。

3 回答 3