在DIV外部單擊
[英]click outside DIV
問題描述
<body>
<div id="aaa">
<div id="bbb">
</div>
</div>
</body>
$(#?????).click(function(){
$('#bbb').hide();
})
如果用戶要在框#bbb之外單擊，我想隱藏#bbb，我必須使用什么？ 但是，如果我單擊div #bbb，則框仍然可見-僅在外部。
7 個解決方案
解決方案1
12 已采納 2012-08-06 19:33:43
$('body').click(function(e){
if( e.target.id == 'bbb' )
{ return true; }
else
{ $('#bbb').hide(); }
});
注釋的說明：有幾種方法可以執行此操作，無論哪種方法，我們需要監聽對父元素的單擊，使其成為#aaa類的直接父元素，或者是諸如body或document類的遙遠父元素。 這樣，我們可以捕獲在#bbb之外發生的#bbb 。
現在，我們有我們需要的.hide如果用戶沒有點擊的內部不發生#bbb 。 我們可以通過兩種方式
如果用戶單擊
#bbb則停止傳播。 這將使click事件不會“冒泡”到父級。 這樣，單擊事件就永遠不會到達父級，因此#bbb不會隱藏。 我個人不喜歡這種方法，因為停止傳播將使所有單擊事件都冒泡，並且您可能有一些單擊事件，您希望將它們冒泡到本地父級而不是遠程父級。 或者，您可能從遠處的父級委派了偵聽器，如果停止了單擊傳播，該偵聽器將停止工作。檢查父偵聽器中的
#bbb元素。 這是上面顯示的方法。 基本上，這會偵聽遠方的父母，當發生單擊時，它會檢查該單擊是否專門針對#bbb。 如果不是上#bbb.hide被觸發，否則返回可以綁成真，那么其他的東西click活動將繼續工作。 僅出於這個原因，我更喜歡這種方法，但是其次它的一點點更具可讀性和可理解性。
最后，您可以通過多種方式查看點擊是否起源於#bbb 。 任何都會起作用的，模式才是真正的東西。
http://jsfiddle.net/tpBq4/ //由@Raminson修改而成，答案非常相似。
新建議，在沒有jQuery的情況下利用事件冒泡。
var isOutSide = true
bbb = documment.getElementById('bbb');
document.body.addEventListener('click', function(){
if(!isOutSide){
bbb.style.display = 'none';
}
isOutSide = true;
});
bbb.addEventListener('click', function(){
isOutSide = false;
});
解決方案2
4 2012-08-06 19:32:17
在click事件冒泡到document元素時，將其捕獲。 當它碰到document元素時，隱藏該元素。 然后，在該元素的click事件處理程序中，停止事件的傳播，使其不會到達document元素：
$(function () {
$(document).on('click', function () {
$('#bbb').hide();
});
$('#bbb').on('click', function (event) {
event.stopPropagation();
});
});
這是一個演示： http : //jsfiddle.net/KVXNL/
用於event.stopPropagation()文檔： http : //api.jquery.com/event.stopPropagation/
解決方案3
2 2012-08-06 19:35:53
我做了一個插件可以做到這一點。 它保留了值this地方，因為這些其他解決方案this值將引用document 。
https://github.com/tylercrompton/clickOut
使用：
$('#bbb').clickOut(function () {
$(this).hide();
});
解決方案4
1 2012-08-06 19:33:05
您可以使用事件對象的target屬性，請嘗試以下操作：
$(document).click(function(e) {
if (e.target.id != 'bbb') {
$('#bbb').hide();
}
})
解決方案5
0 2012-08-06 19:32:28
這會起作用
$("#aaa").click(function(){
$('#bbb').hide();
});
$("#bbb").click(function(event){
event.stopPropagation();
})
因為bbb在aaa內，所以該事件將“起泡至aaa ”。 因此，單擊bbb時，必須使用event.stopPropagation停止冒泡
解決方案6
0
好
*這不是jquery。 您可以輕松地對其進行修改以與IE一起使用
首先創建輔助方法以促進編碼不要與JQuery $（）混淆
function $g(element) {
return document.getElementById(element);
}
創建我們的監聽器類
function globalClickEventListener(obj){
this.fire = function(event){
obj.onOutSideClick(event);
}
}
假設我們需要捕獲對文檔正文的每次點擊
因此，我們需要創建偵聽器數組並初始化我們的工作。 加載時將調用此方法
function initialize(){
// $g('body') will return reference to our document body. parameter 'body' is the id of our document body
$g('body').globalClickEventListeners = new Array();
$g('body').addGlobalClickEventListener = function (listener)
{
$g('body').globalClickEventListeners.push(listener);
}
// capture onclick event on document body and inform all listeners
$g('body').onclick = function(event) {
for(var i =0;i < $g('body').globalClickEventListeners.length; i++){
$g('body').globalClickEventListeners[i].fire(event);
}
}
}
初始化后，我們創建事件偵聽器並傳遞需要了解我們文檔中所有信息的對象的引用
function goListening(){
var icanSeeEveryClick = $g('myid');
var lsnr = new globalClickEventListener(icanSeeEveryClick);
// add our listener to listeners array
$g('body').addGlobalClickEventListener(lsnr);
// add event handling method to div
icanSeeEveryClick.onOutSideClick = function (event){
alert('Element with id : ' + event.target.id + ' has been clicked');
}
}
*考慮到文件主體的高度和寬度
*在不需要事件偵聽器時將其刪除
解決方案7
0 2014-08-26 06:40:56
$(document).click(function(event) {
if(!$(event.target).closest('#elementId').length) {
if($('#elementId').is(":visible")) {
$('#elementId').hide('fast');
}
}
})
用div更改“ #elementId”。
隱藏div點擊外面
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.