Jquery，如何：单击 div 之外的任意位置，div 淡出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2124684/
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
Jquery, how: click anywhere outside of the div, the div fades out
提问by ExodusNicholas
In Jquery how would i make it so that if i had a div, with different elements inside of it, a select, a search input, etc, that when i click outside of the div, on the page, the div fades out, but i can click on the select and type in the search input and not have it fade? any help is appreciated. -nick
在 Jquery 中，如果我有一个 div，里面有不同的元素，一个选择，一个搜索输入等，那么当我在 div 外部点击页面时，div 会淡出，但是我可以点击选择并在搜索输入中输入而不让它褪色吗？任何帮助表示赞赏。-缺口
回答by jpsimons
Code Duck's answer is incomplete, because you'd need to have it notfade out if you click the DIV itself (only outside). So say your DIV that's supposed to fade out has an ID of "menu".
Code Duck 的答案是不完整的，因为如果您单击 DIV 本身（仅在外部），您需要让它不会淡出。因此，假设您应该淡出的 DIV 的 ID 为“菜单”。
jQuery("#menu").click(function(){ return false; });
jQuery(document).one("click", function() { jQuery("#menu").fadeOut(); });
The use of oneis more concise than the bind/unbind. Also namespaced events aren't really needed here if you use onebecause there's no need to explicitly unbind a particular click handler on document.
使用one比 bind/unbind 更简洁。是不是真的需要这里也命名空间的事件，如果你使用一个，因为没有必要在文件明确解除绑定特定的点击处理程序。
The return falseis just saying "stop bubbling this event up to the document."
该返回假只是说：“停止冒泡这个事件到文档中。”
回答by Zach B
Many modal dialogs use an partially transparent overlay that covers the entire page indicating that the dialog has focus. I would consider this the best way to accomplish what you want. If you really don't want the page darkened or grayed out, you can always just make the overlay completely transparent. For an example check out Facebox.
许多模态对话框使用部分透明的覆盖层覆盖整个页面，表明对话框具有焦点。我认为这是实现您想要的最佳方式。如果您真的不希望页面变暗或变灰，您总是可以使覆盖层完全透明。例如，请查看Facebox。
回答by Zach B
I know this is an older question, but here's an extension I wrote to add a clickOutside function to elements:
我知道这是一个较旧的问题，但这是我编写的一个扩展程序，用于向元素添加 clickOutside 函数：
$.fn.extend({
// Calls the handler function if the user has clicked outside the object (and not on any of the exceptions)
clickOutside: function(handler, exceptions) {
var $this = this;
$("body").bind("click", function(event) {
if (exceptions && $.inArray(event.target, exceptions) > -1) {
return;
} else if ($.contains($this[0], event.target)) {
return;
} else {
handler(event, $this);
}
});
return this;
}
}
}
With this you could easily do
有了这个，你可以很容易地做到
$("#menu").clickOutside(function(event, obj) { obj.fadeOut() });
回答by Mithun Karmakar
$("#menu").click(function(){
$(document).unbind("click");
$("#menu").show();
$("#menu").bind('mouseout',function(){
$(document).bind("click",function(){$("#menu").fadeOut();});
});
});
This should do.. cheers.
这应该做.. 欢呼。
回答by Suresh Pattu
Check this out
Demo is here
看看这个
演示在这里
$('#menuBtn').click(function(e) {
e.stopPropagation();
$('.navMenuSecWrapper').fadeToggle();
return false;
});
$(document).click(function() {
$('.navMenuSecWrapper').fadeOut();
});
回答by JAL
You can bind a click handler on $(document)like
您可以$(document)像这样绑定点击处理程序
$(document).click(function(){
$(this).unbind('click');
$('#menu').fadeOut();
}
