當用戶點擊div外的JQuery事件？

只要用戶在div外部單擊以隱藏該div，是否可以調用任何事件？當用戶點擊div外的JQuery事件？

我試過使用$(document).click()，但是即使當用戶點擊應該顯示div的鏈接時也會調用它。因此，點擊處理程序事件顯示div，並立即$(document).click()將其隱藏，這意味着div永遠不會顯示。

想法？

2011-04-15 Click Upvote

可以嘗試委派onclick事件處理程序到主體元件（或其他合適的父容器）和用於測試的target element是否是揭示鏈路：

$("body").click(function(e) { 
    if(e.target.id == "idOfLinkToShowDiv") { 
     $("#idOfTheDiv").show(); 
    } else { 
     $("#idOfTheDiv").hide(); 
    } 
});

以上可以使用.toggle縮短：

$("body").click(function(e) { 
    $("#idOfTheDiv").toggle(e.target.id == "idOfLinkToShowDiv"); 
});

另一種方式：

$("body").click(function() { 
    $("#idOfTheDiv").hide(); 
}); 

$(".showLink").click(function(e) { 
    e.stopPropagation(); 
    $("#idOfTheDiv").show(); 
});

來源

2011-04-15 23:10:22 karim79

當單擊任何元素時，檢查元素的ID是否與要隱藏的元素相匹配。如果沒有，隱藏它。

$("*").click(function(){ 
    if(this.id === "hideMe"){ 
     return false; 
    } 
    else{ 
     $("#hideMe").hide(); 
    } 
});

退房的演示上jsFiddle

來源

2011-04-15 23:11:45

這將點擊處理程序附加到頁面上的每一個元素。 – karim79 2011-04-15 23:14:13

這正是我想要的，但有1個問題。這工作完美的小提琴，但是當我在我的代碼嘗試'this.id'是'NULL'或'empty'（使用alert檢查它），所以它不起作用。我正在使用最新的jQuery。你能幫我嗎？ – 2014-06-26 05:14:41

一個soluation是在點擊該元素的檢查。

另一種解決方案可能是：

<body> 
    <div class="infopane"></div> 
    <div class="wrapper"> 
    content of page 
    </div> 
</body>

所以我可以做：

$('.wrapper').click(function() { 
    $('.infopane').hide(); 
});

來源

2011-04-15 23:14:13 PeeHaa

是。顯示div後，只有綁定click事件才能隱藏div（到文檔主體）。然後，在顯示的div上，捕獲click（）事件，並防止在div click（）上傳播。任何在div外部的點擊都會隱藏起來，並且任何點擊都不會冒泡到文檔中。

function hideDiv(){ 
    $('#someDiv').hide(); 
    $(document.body).unbind('click',hideDiv); 
} 

$('#someLink').click(function(){ 
    $('#someDiv').show().click(function(e){ e.stopPropagation(); }); 
    $(document.body).bind('click',hideDiv); 
});

來源

2011-04-15 23:15:07 Jage

您正在尋找外部事件插件。超級好用

http://benalman.com/projects/jquery-outside-events-plugin/

來源

2011-04-16 00:35:01 wesbos

當用戶點擊div外的JQuery事件？

回答

相關問題