jQuery：隱藏（）框時點擊身體，但不（）元素本身？

我有一個<a href="#" id="btn">Show Box</a> somwhere在我的DOM。另外我有一個div#overlay，默認設置爲display:none;。jQuery：隱藏（）框時點擊身體，但不（）元素本身？

// Toggle Overlay 
$('#btn').click(function(e) { 
    e.preventDefault(); 
    $('#overlay').toggle(); 
}) 

$('body').not('#btn, #overlay').click(function() { 
    if ($('#overlay').is(':visible')) $('#overlay').hide(); 
});

爲什麼這不起作用？我希望#btn在點擊時切換（）覆蓋。但是，當疊加層可見時，單擊文檔上的任意位置（除#btn本身或#overlay外），我希望疊加層也被隱藏。

來源

2013-03-13 matt

您在body捕獲click這本身就是從未#btn或#overlay，因此預期這是行不通的。你需要覈對，而不是什麼是event.target

即

$('body').click(function(e) { 
    var target = $(e.target); 
    if(!target.is('#btn') && !target.is('#overlay')) { 
     if ($('#overlay').is(':visible')) $('#overlay').hide(); 
    } 
});

來源

2013-03-13 13:28:35 techfoobar

謝謝。唯一的問題是覆蓋層有孩子，當點擊疊加層關閉時，因爲它也會觸發身體點擊。或者還有其他一些問題。 – matt 2013-03-13 14:22:19

任何想法爲什麼會發生？ – matt 2013-03-13 14:45:47

使用event.target.id比較點擊區域的id

$('body').click(function(e) { 
    if(e.target.id != 'btn' && e.target.id != 'overlay') 
     if ($('#overlay').is(':visible')) $('#overlay').hide(); 
})

來源

2013-03-13 13:30:35 Anujith

jQuery：隱藏（）框時點擊身體，但不（）元素本身？

回答

相關問題