Question

未单击元素时的单击事件

2012-02-25

172

javascript jquery

也许我只是累了，但我有一个右键菜单，我想在用户单击菜单以外的任何地方时关闭它。但我不知道如何让它在用户单击其他内容时消失。

这是显示菜单的代码：

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

第一个绑定检查用户是否单击了文档外部，第二个绑定检查用户是否单击了菜单以外的所有内容。但第二个实际上不起作用。如果我单击菜单，菜单就会被隐藏。

在我看来不应该那么难……有人有什么想法吗？

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