不单击元素时的单击事件

Question

也许我很累，但是我有一个右键单击菜单，当用户单击菜单以外的其他位置时，我想关闭它。 但是我无法弄清楚当用户单击其他内容时如何使其消失。

这是显示菜单的代码：

// If mouse click on was pressed
$('#content_list table tr').bind('mouseup', function(event) {
    // if right click
    if(event.which == 3) {
        showRightClickMenu(event);
    }
    event.preventDefault();
    event.stopPropagation();
});

这就是我隐藏菜单所得到的

// If mouse click outside document
$(document).bind('blur', function(event) {
    hideRightClickMenu();
    event.stopPropagation();
});

// If mouse click not on the menu
$('*:not(#rightClickMenu *)').bind('mousedown keydown', function(event) {
    hideRightClickMenu();
    event.stopPropagation();
});

第一个绑定检查用户是否在文档外部单击，第二个绑定检查用户是否单击除菜单之外的所有内容。 但是第二个并没有真正起作用。 如果单击菜单，菜单将被隐藏。

不应该那么辛苦imo ...任何人有任何想法吗？

Answer 1

这样尝试

$(document.body).bind('click', function() {
    hideRightClickMenu();
});

$(window).bind('blur', function() {
    hideRightClickMenu();
});

Answer 2

尝试使用focusout()事件，并使用on()代替旧的bind() 。 即使有多个子菜单，也可以使用。 http://jsfiddle.net/elclanrs/jhaF3/1/

// Something like this...
$('#menu li').on('click', function() {
    $(this).find('ul').show();
}).find('ul').on('focusout', function(){
    $(this).hide();
});