<body>
<div id="aaa">
<div id="bbb">
</div>
</div>
</body>
$(#?????).click(function(){
$('#bbb').hide();
})
如果我想在用户单击框外#bbb 时隐藏#bbb,我必须使用什么?但是,如果我单击 div #bbb,则框仍然可见 - 仅在外部可见。
最佳答案
$('body').click(function(e){
if( e.target.id == 'bbb' )
{ return true; }
else
{ $('#bbb').hide(); }
});
注释说明:有几种方法可以做到这一点,无论哪种方式,我们都需要监听对父元素的点击,无论它是像 #aaa
这样的直接父元素还是遥远的父元素父级如 body
或 document
。这样我们就可以捕获发生在 #bbb
之外的点击。
现在我们已经知道,如果用户确实在 #bbb
内部单击,我们需要 .hide
不发生。我们可以通过两种方式做到这一点
如果用户单击
#bbb
,则停止传播。这将使点击事件不是 'bubble' 由父级决定。这样点击事件永远不会到达父级,因此#bbb
不会隐藏。我个人不喜欢这种方法,因为停止传播会导致所有点击事件冒泡,并且您可能希望将点击事件冒泡到本地父级而不是远程父级。或者,您可能有从远方父级委派的监听器,如果点击传播停止,它们将停止工作。检查父监听器中的
#bbb
元素。这是上面显示的方法。基本上,它会监听远方的父级,当点击发生时,它会检查该点击是否专门针对#bbb
。如果它不在#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;
});
关于javascript - 单击外部 DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11834657/