当用户在 DIV 外部单击时，使用 jQuery 隐藏它
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1403615/
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
Use jQuery to hide a DIV when the user clicks outside of it
提问by Scott Yu - builds stuff
I am using this code:
我正在使用此代码：
$('body').click(function() {
$('.form_wrapper').hide();
});
$('.form_wrapper').click(function(event){
event.stopPropagation();
});
And this HTML:
而这个HTML：
<div class="form_wrapper">
<a class="agree" href="javascript:;">I Agree</a>
<a class="disagree" href="javascript:;">Disagree</a>
</div>
The problem is that I have links inside the divand when they no longer work when clicked.
问题是我在里面有链接div，当点击它们时它们不再起作用。
回答by
Had the same problem, came up with this easy solution. It's even working recursive:
有同样的问题，想出了这个简单的解决方案。它甚至可以递归工作：
$(document).mouseup(function(e)
{
var container = $("YOUR CONTAINER SELECTOR");
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.hide();
}
});
回答by Makram Saleh
You'd better go with something like this:
你最好去这样的事情：
var mouse_is_inside = false;
$(document).ready(function()
{
$('.form_content').hover(function(){
mouse_is_inside=true;
}, function(){
mouse_is_inside=false;
});
$("body").mouseup(function(){
if(! mouse_is_inside) $('.form_wrapper').hide();
});
});
回答by Case
This code detects any click event on the page and then hides the #CONTAINERelement if and only if the element clicked was neither the #CONTAINERelement nor one of its descendants.
此代码检测页面上的任何单击事件，然后#CONTAINER当且仅当单击的#CONTAINER元素既不是该元素也不是其后代之一时隐藏该元素。
$(document).on('click', function (e) {
if ($(e.target).closest("#CONTAINER").length === 0) {
$("#CONTAINER").hide();
}
});
回答by David Andres
You might want to check the target of the click event that fires for the body instead of relying on stopPropagation.
您可能想要检查为正文触发的单击事件的目标，而不是依赖于 stopPropagation。
Something like:
就像是：
$("body").click
(
function(e)
{
if(e.target.className !== "form_wrapper")
{
$(".form_wrapper").hide();
}
}
);
Also, the body element may not include the entire visual space shown in the browser. If you notice that your clicks are not registering, you may need to add the click handler for the HTML element instead.
此外，body 元素可能不包括浏览器中显示的整个视觉空间。如果您注意到您的点击没有注册，您可能需要为 HTML 元素添加点击处理程序。
回答by MaxEcho
Check click area is not in the targeted element or in it's child
检查点击区域不在目标元素或其子元素中
$(document).click(function (e) {
if ($(e.target).parents(".dropdown").length === 0) {
$(".dropdown").hide();
}
});
UPDATE:
更新：
jQuery stop propagation is the best solution
jQuery 停止传播是最好的解决方案
$(".button").click(function(e){
$(".dropdown").show();
e.stopPropagation();
});
$(".dropdown").click(function(e){
e.stopPropagation();
});
$(document).click(function(){
$(".dropdown").hide();
});
回答by meder omuraliev
$(document).click(function(event) {
if ( !$(event.target).hasClass('form_wrapper')) {
$(".form_wrapper").hide();
}
});
回答by benvds
Updated the solution to:
将解决方案更新为：
- use mouseenter and mouseleave instead
- of hover use live event binding
- 改用 mouseenter 和 mouseleave
- 悬停使用实时事件绑定
var mouseOverActiveElement = false;
var mouseOverActiveElement = false;
$('.active').live('mouseenter', function(){
mouseOverActiveElement = true;
}).live('mouseleave', function(){
mouseOverActiveElement = false;
});
$("html").click(function(){
if (!mouseOverActiveElement) {
console.log('clicked outside active element');
}
});
回答by Martin Vseticka
A solution without jQuery for the most popular answer:
没有 jQuery的最流行答案的解决方案：
document.addEventListener('mouseup', function (e) {
var container = document.getElementById('your container ID');
if (!container.contains(e.target)) {
container.style.display = 'none';
}
}.bind(this));
MDN: https://developer.mozilla.org/en/docs/Web/API/Node/contains
MDN：https: //developer.mozilla.org/en/docs/Web/API/Node/contains
回答by Roko C. Buljan
Live demo with ESCfunctionality
Works on both Desktop and Mobile
适用于桌面和移动设备
var notH = 1,
$pop = $('.form_wrapper').hover(function(){ notH^=1; });
$(document).on('mousedown keydown', function( e ){
if(notH||e.which==27) $pop.hide();
});
If for some case you need to be sure that your element is really visible when you do clicks on the document: if($pop.is(':visible') && (notH||e.which==27)) $pop.hide();
如果在某些情况下您需要确保在单击文档时您的元素确实可见： if($pop.is(':visible') && (notH||e.which==27)) $pop.hide();
回答by MRVDOG
Wouldn't something like this work?
不会像这样的工作吗？
$("body *").not(".form_wrapper").click(function() {
});
or
或者
$("body *:not(.form_wrapper)").click(function() {
});
