<body>
<div id="aaa">
<div id="bbb">
</div>
</div>
</body>
$(#?????).click(function(){
$('#bbb').hide();
})
如果用户单击框外#bbb，我想隐藏#bbb，我必须使用什么？但是，如果我单击 div #bbb，则框仍然可见-仅在外面。
问问题
13982 次
7 回答
12
$('body').click(function(e){
if( e.target.id == 'bbb' )
{ return true; }
else
{ $('#bbb').hide(); }
});
解释说明：有几种方法可以做到这一点，无论是我们需要监听对父元素的点击，天气它是直接父元素，#aaa还是远距离父元素，如body或document。这样我们就可以捕获在#bbb.
现在我们已经知道，.hide如果用户确实点击了#bbb. 我们可以通过两种方式做到这一点
如果用户单击 ，则停止传播
#bbb。这将使点击事件不会“冒泡”到父级。这样点击事件永远不会到达父级，因此#bbb不会隐藏。我个人不喜欢这种方法，因为停止传播会使所有点击事件都不会冒泡，并且您可能希望将点击事件冒泡到本地父级而不是远程父级。或者，您可能从远方的父级委派了侦听器，如果单击传播停止，该侦听器将停止工作。检查
#bbb父侦听器中的元素。这就是上面显示的方法。基本上，这会监听一个遥远的父母，当点击发生时，它会检查该点击是否是#bbb专门的。如果它 IS NOT on#bbb.hide被触发，否则它返回 true，因此可能与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;
});
于 2012-08-06T19:33:43.480 回答
4
抓住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/
于 2012-08-06T19:32:17.707 回答
2
我做了一个插件来做到这一点。它保留了this这些其他解决方案的this价值将引用的价值document。
https://github.com/tylercrompton/clickOut
利用：
$('#bbb').clickOut(function () {
$(this).hide();
});
于 2012-08-06T19:35:53.820 回答
1
您可以使用target事件对象的属性，尝试以下操作：
$(document).click(function(e) {
if (e.target.id != 'bbb') {
$('#bbb').hide();
}
})
于 2012-08-06T19:33:05.320 回答
0
好的
* 这不是 jquery。您可以轻松修改它以使用 IE
首先创建辅助方法以方便编码不要与 JQuery $() 混淆
function $g(element) {
return document.getElementById(element);
}
创建我们的监听器类
function globalClickEventListener(obj){
this.fire = function(event){
obj.onOutSideClick(event);
}
}
假设我们需要捕获对文档正文的每次点击
所以我们需要创建 listeners 数组并初始化我们的工作。此方法将在加载时调用
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);
}
}
}
初始化后，我们创建事件侦听器并传递需要了解文档上每个 clcik 的对象的引用
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');
}
}
*考虑到文档正文的高度和宽度
*在不需要时移除事件监听器
于 2013-02-12T18:38:12.533 回答
0
$(document).click(function(event) {
if(!$(event.target).closest('#elementId').length) {
if($('#elementId').is(":visible")) {
$('#elementId').hide('fast');
}
}
})
用您的 div 更改“#elementId”。
于 2014-08-26T06:40:56.213 回答
0
这将起作用
$("#aaa").click(function(){
$('#bbb').hide();
});
$("#bbb").click(function(event){
event.stopPropagation();
})
因为bbb在aaa内，所以事件将“冒泡到aaa ”。所以你必须通过 单击bbbevent.stopPropagation来停止冒泡
于 2012-08-06T19:32:28.703 回答