如何从mousedown中排除元素

Question

我有一个上下文菜单，应该通过点击HTML-DOM中的任意位置来关闭：

我的问题：无法执行单击上下文菜单中的链接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() -Function似乎不适用于此。我还通过Sizzle尝试:not(.contextMenu)但没有成功。我使用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来测试是否：

  当点击传播到Document时，

是.contextMenu悬停？