Jquery 如何从mousedown中排除元素

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

我的问题：无法执行在我的关联菜单中单击链接

执行操作

。在此之前，关联菜单将被删除。这是我的密码：

$(document).ready(function() {

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

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

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

jQuery的

.not（）

-函数在这里似乎不起作用。我还通过Sizzle尝试了

：not（.contextMenu）

，但没有成功。我使用了

mousedown

，因为右键单击也会删除上下文菜单

---

这里是小提琴：

的

.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"
}) ;  

这个怎么样：

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

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

单击文档中的任意位置时，将删除

.contextMenu

。但是，当您单击

.contextMenu

本身时，它将取消触发的第一个功能
请注意，我使用.hide（）作为.remove（）将其从DOM中删除，但这取决于是否要再次显示

.contextMenu

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

});

编辑

---

添加了对基于注释的两次鼠标单击的支持。

使用

文档

而不是

html

。尝试以下操作：

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

演示：

$(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

上的单击会传播到

文档
，

但是如果我们设置一个悬停的标志
contMenu
（
1表示mouseenter，0表示mouseleave
）

我们可以使用它作为
布尔值来测试：

当点击传播到文档时，
.contextMenu
是否悬停

谢谢你的快速回答。但是我需要mousedown，因为右键单击也应该是可能的。然后还要在a元素上绑定mousedown。@RokoC.Buljan这里的目标更多的是防止传播，而不是默认行为。当使用
a
元素并编程一个动作时，
return false
似乎更有用。@dystroy duhh，当然。我想写
stopPropagation
。肌肉记忆：）是否应该使用
stopPropagation
或return false实际上取决于链接的使用方式。我们在问题中没有足够的信息。
$（'：not（.contextMenu）
将起作用，因为它不会将处理程序分配给上下文菜单。但是，它仍将被分配给上下文菜单的父元素并由其执行。