jQuery 通过单击外部关闭 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17965839/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Close a div by clicking outside
提问by user1355300
I want to hide a div by clicking on the close link in it, orby clicking anywhere outside that div.
我想通过单击其中的关闭链接或单击该 div 之外的任何位置来隐藏div。
I am trying following code, it opens and close the div by clicking close link properly, but if I have problem to close it by clicking anywhere outside the div.
我正在尝试以下代码，它通过正确单击关闭链接来打开和关闭 div，但是如果我无法通过单击 div 外的任何位置来关闭它。
$(".link").click(function() {
$(".popup").fadeIn(300);
}
);
$('.close').click(function() {
$(".popup").fadeOut(300);
}
);
$('body').click(function() {
if (!$(this.target).is('.popup')) {
$(".popup").hide();
}
}
);<div class="box">
<a href="#" class="link">Open</a>
<div class="popup">
Hello world
<a class="close" href="#">Close</a>
</div>
</div>回答by A. Wolff
An other way which makes then your jsfiddle less buggy (needed double click on open).
另一种使您的 jsfiddle 减少错误的方法（需要双击打开）。
This doesn't use any delegated event to body level
这不使用任何委派事件到身体级别
Set tabindex="-1"to DIV .popup ( and for style CSS outline:0)
设置tabindex="-1"为 DIV .popup （和样式 CSS outline:0）
$(".link").click(function(e){
e.preventDefault();
$(".popup").fadeIn(300,function(){$(this).focus();});
});
$('.close').click(function() {
$(".popup").fadeOut(300);
});
$(".popup").on('blur',function(){
$(this).fadeOut(300);
});
回答by Arun P Johny
You need
你需要
$('body').click(function(e) {
if (!$(e.target).closest('.popup').length){
$(".popup").hide();
}
});
回答by Jonas Grumann
I'd suggest using the stopPropagation() method as shown in the modified fiddle:
我建议使用 stopPropagation() 方法，如修改后的小提琴所示：
$('body').click(function() {
$(".popup").hide();
});
$('.popup').click(function(e) {
e.stopPropagation();
});
That way you can hide the popup when you click on the body, without having to add an extra if, and when you click on the popup, the event doesn't bubble up to the body by going through the popup.
这样，您可以在单击正文时隐藏弹出窗口，而无需添加额外的 if，并且当您单击弹出窗口时，事件不会通过弹出窗口冒泡到正文。
回答by anuj152
You'd better go with something like this. Just give an id to the div which you want to hide and make a function like this. call this function by adding onclick event on body.
你最好用这样的东西。只需给要隐藏的 div 一个 id 并创建这样的函数。通过在主体上添加 onclick 事件来调用此函数。
function myFunction(event) {
if(event.target.id!="target_id")
{
document.getElementById("target_id").style.display="none";
}
}
回答by Rajat Talwar
Add a transparent background taking up the whole window size, just before your popup div
在弹出 div 之前添加占据整个窗口大小的透明背景
.transparent-back{
position: fixed;
top: 0px;
left:0px;
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.5);
}
Then on its click, dismiss the popup.
然后点击它，关闭弹出窗口。
$(".transparent-back").on('click',function(){
$('popup').fadeOut(300);
});
回答by lookingaround
This question might have been answered here. There might be some potential issues when event propagation is interrupted, as explained by Philip Walton in this post.
这个问题可能已经在这里回答。正如 Philip Walton 在这篇文章中所解释的那样，当事件传播被中断时，可能会出现一些潜在的问题。
A better approach/solution would be to create a custom jQuery event, e.g. clickoutside. Ben Alman has a great post (here) that explains how to implement one (and also explains how special events work), and he's got a nice implementation of it (here).
更好的方法/解决方案是创建自定义 jQuery 事件，例如 clickoutside。Ben Alman 有一篇很棒的帖子（这里）解释了如何实现一个（并且还解释了特殊事件的工作原理），并且他有一个很好的实现（这里）。
More reading on jQuery events API and jQuery special events:
更多关于 jQuery 事件 API 和 jQuery 特殊事件的阅读：
回答by anshul nigam
//for closeing the popover when user click outside it will close all popover
var hidePopover = function(element) {
var elementScope = angular.element($(element).siblings('.popover')).scope().$parent;
elementScope.isOpen = false;
elementScope.$apply();
//Remove the popover element from the DOM
$(element).siblings('.popover').remove();
};
$(document).ready(function(){
$('body').on('click', function (e) {
$("a").each(function () {
//Only do this for all popovers other than the current one that cause this event
if (!($(this).is(e.target) || $(this).has(e.target).length > 0)
&& $(this).siblings('.popover').length !== 0 && $(this).siblings('.popover').has(e.target).length === 0)
{
hidePopover(this);
}
});
});
});
