1

我有一个上下文菜单，应该通过单击 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 的-Function.not()似乎在这里不起作用。我也尝试:not(.contextMenu)通过 Sizzle 没有成功。我使用mousedown了 ，因为右键单击也应该删除上下文菜单。

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

4

4 回答 4

0

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

示范

于 2013-11-05T07:54:02.700 回答
0

那这个呢：

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

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

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

jsFiddle

编辑
根据评论添加了对鼠标单击的支持。

于 2013-11-05T07:55:34.580 回答
0

使用document而不是 .html试试这个：

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

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

于 2013-11-05T07:56:28.530 回答
0

演示

$(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悬停？

于 2013-11-05T08:01:45.440 回答