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

Question

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

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

Answer 1

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

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

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

Answer 2

将模糊与回调一起使用。
但它还没有经过测试。您想恢复其他模糊的右键功能吗？
我认为这在其他类型的活动中会更好地执行。

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

Answer 3

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

您应该使用 mouseout 事件：

假设您的上下文菜单有一个 id 'contextMenuContainer'，这应该覆盖它：

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

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

更新：

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