我怎样才能排除鼠标按下

Question

元素我有一个上下文菜单，应该通过点击HTML，DOM的任何地方被关闭：

我的问题：a。单击的链接Make Action我上下文菜单无法执行。上下文菜单将被删除。这里是我的代码：

$(document).ready(function() { 

    $('html').not(".contextMenu").on('mousedown', function() { 

     // remove context menu 
     $('.contextMenu').remove(); 
    }); 

    $('.contextMenu a').click(function() { 
     alert('action'); 
     $('.contextMenu').remove(); 
    }); 
}); 

jQuery的.not()功能似乎不工作在这里。我也试过:not(.contextMenu)通过Sizzle没有成功。我使用mousedown，因为右键单击也应该删除上下文菜单。

这里是小提琴：http://jsfiddle.net/9Y5Fz/1/

Answer 1

的.not是无用的，标准的解决方案是防止传播。你可以这样做：

$('html').on('mousedown', function() { 
    // remove context menu 
    alert('NO action'); 
    $('.contextMenu').remove(); 
}); 

$('.contextMenu a').click(function() { 
    alert('action'); 
    $('.contextMenu').remove(); 
    return false; // avoids propagation and so prevents the click on "html" 
}).on('mousedown', function(){ 
    return false; // avoids propagation and so prevents the mousedown on "html" 
}) ; 

Demonstration

Answer 2

这个怎么样：

$(document).ready(function() { 
    $(document).on('mousedown', function() 
    { 
     $('.contextMenu').hide(); 
    }) 

    $('.contextMenu').on('mousedown', function(e) 
    { 
     e.stopPropagation();   
    }) 
}); 

什么情况是，在文档中的任意位置单击时，你会删除.contextMenu。但是，当您单击.contextMenu时，它将取消触发的第一个功能。
请注意，我使用.hide（）作为.remove（）将其从DOM中移除，但取决于是否要再次显示.contextMenu。

jsFiddle

编辑
增加的支持基础上的意见都鼠标点击。使用

Answer 3

document代替html。尝试这样的：

$(document).on('click', function() { 

演示：http://jsfiddle.net/9Y5Fz/4/

Answer 4

DEMO

$(function() { 

    var contMenu_Hovered = 0; 

    $(document).on('click', ':not(.contextMenu)', function() { 
     if(!contMenu_Hovered) $('.contextMenu').remove(); 
    }); 

    $('.contextMenu').hover(function(){ 
     contMenu_Hovered ^= 1;   // toggle flag 1, 0 
    }).on('click', 'a', function() { 
     alert('action'); 
    }); 

}); 

你只需要一个.remove()

，你就.contextMenu的点击传播到document，
但如果我们设定一个标志contMenu_Hovered（1 for mouseenter, 0 for mouseleave）
我们可以使用它作为boolean来测试：

虽然点击传播到文档，是.contextMenu徘徊？