我怎樣才能排除鼠標按下

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徘徊？