当用户点击外部时隐藏 jQuery UI 菜单答案

【问题标题】：Hide jQuery UI Menu when user clicks outside当用户点击外部时隐藏 jQuery UI 菜单
【发布时间】：2013-02-27 19:53:00
【问题描述】：

我将 jQuery UI 菜单用作上下文菜单，因此当用户单击表格中的单元格时，它会显示相关选项。问题是，它并不是真的被设计成这样使用的，所以当用户在菜单外点击时它不会隐藏。

我尝试使用模糊方法：

$("#menu").menu({
    blur: function( event, ui ) {
        $("#menu").css('top', '-1000px');
        $("#menu").css('left', '-1000px');
    }
});

但由于某种原因，即使您滚动到菜单中的某个选项，菜单也会隐藏。

有没有简单的解决方案？

编辑： 拉出我使用的菜单：

$("table.adminScheduleViewer tr td:nth-child(4), table.adminScheduleViewer tr td:nth-child(5), table.adminScheduleViewer tr td:nth-child(6), table.adminScheduleViewer tr td:nth-child(7), table.adminScheduleViewer tr td:nth-child(8), table.adminScheduleViewer tr td:nth-child(9), table.adminScheduleViewer tr td:nth-child(10)").click(function(event){
    $("#menu").css('top', event.pageY);
    $("#menu").css('left', event.pageX);
});

如果我尝试使用 $('body').click() 来隐藏它，它似乎总是首先被调用。你能改变 jQuery 处理点击的顺序吗？

【问题讨论】：

stackoverflow.com/questions/2868582/… 的重复项？

标签： jquery user-interface hide contextmenu

【解决方案1】：

 $('body:not(#menu)').click(function(){
     $("#menu").css({ 'top' : '-1000px', 'left' : '-1000px' });
 });

我觉得这样更性感一点

【讨论】：

我想出了一个类似的解决方案，但它不起作用。因为我使用 $("td").click() 将顶部和左侧位置更改为屏幕上，所以似乎首先调用了 td 的单击，然后 body:not one 立即将其隐藏。
我不知道为什么我没有想到使用 event.stopPropagation()。没关系，谢谢！
这是否会为 BODY 的每个不是菜单的子项添加一个事件侦听器？我不觉得性感，只是混杂：p

【解决方案2】：

怎么样：

           $('body').not($('#menu').find('*'))
             .bind('click',function(){
                $("#menu").css('top', '-1000px');
                $("#menu").css('left', '-1000px');
             });

让我们处理正文上的点击，如果点击不在菜单上的任何位置，请隐藏。

【讨论】：

正确。我目前使用的是旧版本的 jQuery，所以我的注意力集中在那个可用性集上。所以如果你有最新的 jQuery，请使用 .on - 谢谢 scott。
正如我对@ScottSelby 所说，我想出了一个类似的解决方案，但它不起作用。因为我使用 $("td").click() 将顶部和左侧位置更改为屏幕上的位置，所以似乎首先调用了 td 的单击，然后正文立即将其隐藏。

【解决方案3】：

当用户在菜单外点击时，我使用它来隐藏我的 jquery-ui 菜单。

$('body:not(#menu)')
.off('click')
.on( 'click', function() {
    $('body:not(#menu)')
    .off('click');
    $('#menu')
    .hide();
});

与上述答案类似，但隐藏菜单元素而不是将它们移出视口。在调用一次后还会禁用单击句柄以保留其他单击功能。

【讨论】：