当用户在DIV之外单击时，使用jQuery隐藏DIV

我正在使用此代码：

$('body').click(function() {$('.form_wrapper').hide();
});$('.form_wrapper').click(function(event){event.stopPropagation();
});

和这个HTML：

<div class="form_wrapper"><a class="agree" href="javascript:;">I Agree</a><a class="disagree" href="javascript:;">Disagree</a>
</div>

问题是我在DIV中有链接，当单击它们时它们不再起作用。

#1楼

您可能要检查为主体触发的click事件的目标，而不是依赖stopPropagation。

就像是：

$("body").click
(function(e){if(e.target.className !== "form_wrapper"){$(".form_wrapper").hide();}}
);

同样，主体元素可能不包括浏览器中显示的整个视觉空间。如果您发现点击没有注册，则可能需要为HTML元素添加点击处理程序。

#2楼

您最好选择这样的东西：

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();});
});

#3楼

$(document).click(function(event) {if ( !$(event.target).hasClass('form_wrapper')) {$(".form_wrapper").hide();}
});

#4楼

该代码检测到页面上的任何click事件，然后仅当被单击的元素既不是#CONTAINER元素也不是其后代之一时，才隐藏#CONTAINER元素。

$(document).on('click', function (e) {if ($(e.target).closest("#CONTAINER").length === 0) {$("#CONTAINER").hide();}
});

#5楼

如果您在ios上遇到问题，则mouseup在Apple设备上不起作用。

jquery中的mousedown / mouseup是否可用于ipad？

我用这个：

$(document).bind('touchend', function(e) {var container = $("YOURCONTAINER");if (container.has(e.target).length === 0){container.hide();}});

#6楼

这是我在另一个线程上找到的jsfiddle，它也可以使用esc键： http : //jsfiddle.net/S5ftb/404

    var button = $('#open')[0]var el     = $('#test')[0]$(button).on('click', function(e) {$(el).show()e.stopPropagation()})$(document).on('click', function(e) {if ($(e.target).closest(el).length === 0) {$(el).hide()}})$(document).on('keydown', function(e) {if (e.keyCode === 27) {$(el).hide()}})

#7楼

 $('body').click(function(event) {if (!$(event.target).is('p')){$("#e2ma-menu").hide();}
});

p是元素名称。也可以传递id或类或元素名称的地方。

#8楼

具有ESC功能的实时演示

在台式机和移动设备上均可使用

var notH = 1,$pop = $('.form_wrapper').hover(function(){ notH^=1; });$(document).on('mousedown keydown', function( e ){if(notH||e.which==27) $pop.hide();
});

_{如果在某些情况下，您需要确保在单击文档时元素真正可见： if($pop.is(':visible') && (notH||e.which==27)) $pop.hide();}

#9楼

我这样做是这样的：

var close = true;$(function () {$('body').click (function(){if(close){div.hide();}close = true;})alleswasdenlayeronclicknichtschliessensoll.click( function () {   close = false;});});

#10楼

dojo.query(document.body).connect('mouseup',function (e)
{var obj = dojo.position(dojo.query('div#divselector')[0]);if (!((e.clientX > obj.x && e.clientX <(obj.x+obj.w)) && (e.clientY > obj.y && e.clientY <(obj.y+obj.h))) ){MyDive.Hide(id);}
});

#11楼

如果单击.form_wrapper，则返回false：

$('body').click(function() {$('.form_wrapper').click(function(){return false
});$('.form_wrapper').hide();
});//$('.form_wrapper').click(function(event){
//   event.stopPropagation();
//});

#12楼

将click事件附加到表单包装器外部的顶级元素，例如：

$('#header, #content, #footer').click(function(){$('.form_wrapper').hide();
});

这也可以在触摸设备上使用，只需确保选择器列表中不包括.form_wrapper的父项即可。

#13楼

对于IPAD和IPHONE等触控设备，我们可以使用以下代码

$(document).on('touchstart', function (event) {
var container = $("YOUR CONTAINER SELECTOR");if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container{container.hide();}
});

#14楼

现场演示

检查点击区域不在目标元素中还是其子元素中

$(document).click(function (e) {if ($(e.target).parents(".dropdown").length === 0) {$(".dropdown").hide();}
});

更新：

jQuery停止传播是最好的解决方案

现场演示

$(".button").click(function(e){$(".dropdown").show();e.stopPropagation();
});$(".dropdown").click(function(e){e.stopPropagation();
});$(document).click(function(){$(".dropdown").hide();
});

#15楼

（只需添加到prc322的答案即可。）

就我而言，我正在使用此代码隐藏用户单击相应选项卡时出现的导航菜单。我发现添加一个额外的条件很有用，容器外部的点击目标不是链接。

$(document).mouseup(function (e)
{var container = $("YOUR CONTAINER SELECTOR");if (!$("a").is(e.target) // if the target of the click isn't a link ...&& !container.is(e.target) // ... or the container ...&& container.has(e.target).length === 0) // ... or a descendant of the container{container.hide();}
});

这是因为我网站上的某些链接向页面添加了新内容。如果在导航菜单消失的同时添加了新内容，则可能会使用户迷失方向。

#16楼

 var exclude_div = $("#ExcludedDiv");; $(document).click(function(e){ if( !exclude_div.is( e.target ) ) // if target div is not the one you want to exclude then add the class hidden $(".myDiv1").addClass("hidden"); });

小提琴

#17楼

您可以将tabindex设置为父<div>并监听focusout事件，而不是监听DOM来隐藏一个特定元素。

设置tabindex将确保在<div>上触发blur事件（通常不会触发）。

因此，您的HTML如下所示：

<div class="form_wrapper" tabindex="0"><a class="agree" href="javascript:;">I Agree</a><a class="disagree" href="javascript:;">Disagree</a>
</div>

还有你的JS：

$('.form_wrapper').on('focusout', function(event){$('.form_wrapper').hide();
});

#18楼

没有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

#19楼

通过使用此代码，您可以隐藏任意数量的项目

var boxArray = ["first element's id","second element's id","nth element's id"];window.addEventListener('mouseup', function(event){for(var i=0; i < boxArray.length; i++){var box = document.getElementById(boxArray[i]);if(event.target != box && event.target.parentNode != box){box.style.display = 'none';}}
})

#20楼

基于prc322的出色回答。

function hideContainerOnMouseClickOut(selector, callback) {var args = Array.prototype.slice.call(arguments); // Save/convert arguments to array since we won't be able to access these within .on()$(document).on("mouseup.clickOFF touchend.clickOFF", function (e) {var container = $(selector);if (!container.is(e.target) // if the target of the click isn't the container...&& container.has(e.target).length === 0) // ... nor a descendant of the container{container.hide();$(document).off("mouseup.clickOFF touchend.clickOFF");if (callback) callback.apply(this, args);}});
}

这增加了几件事...

放在带有“无限” args回调的函数中
添加了对jquery的.off（）的调用以及事件名称空间，以在事件运行后将其与文档解除绑定。
随附的用于移动功能的触摸端

我希望这可以帮助别人！

#21楼

 $(document).ready(function() { $('.modal-container').on('click', function(e) { if(e.target == $(this)[0]) { $(this).removeClass('active'); // or hide() } }); });

 .modal-container { display: none; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 999; } .modal-container.active { display: flex; } .modal { width: 50%; height: auto; margin: 20px; padding: 20px; background-color: #fff; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="modal-container active"> <div class="modal"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac varius purus. Ut consectetur viverra nibh nec maximus. Nam luctus ligula quis arcu accumsan euismod. Pellentesque imperdiet volutpat mi et cursus. Sed consectetur sed tellus ut finibus. Suspendisse porttitor laoreet lobortis. Nam ut blandit metus, ut interdum purus.</p> </div> </div>

#22楼

这样的东西行不行？

$("body *").not(".form_wrapper").click(function() {});

要么

$("body *:not(.form_wrapper)").click(function() {});

#23楼

这么多的答案，一定是通过的权利，已经添加了一个答案...我没有看到最新的（jQuery 3.1.1）答案-因此：

$(function() {$('body').on('mouseup', function() {$('#your-selector').hide();});
});

#24楼

从https://sdtuts.com/click-on-not-specified-element/复制

现场演示http://demos.sdtuts.com/click-on-specified-element

$(document).ready(function () {var is_specified_clicked;$(".specified_element").click(function () {is_specified_clicked = true;setTimeout(function () {is_specified_clicked = false;}, 200);})$("*").click(function () {if (is_specified_clicked == true) {
//WRITE CODE HERE FOR CLICKED ON OTHER ELEMENTS$(".event_result").text("you were clicked on specified element");} else {
//WRITE CODE HERE FOR SPECIFIED ELEMENT CLICKED$(".event_result").text("you were clicked not on specified element");}})
})

#25楼

将解决方案更新为：

使用mouseenter和mouseleave代替
悬停使用实时事件绑定

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');}
});

#26楼

var n = 0;
$("#container").mouseenter(function() {
n = 0;}).mouseleave(function() {
n = 1;
});$("html").click(function(){
if (n == 1) {
alert("clickoutside");
}
});

#27楼

甚至是运动鞋：

$("html").click(function(){ $(".wrapper:visible").hide();
});

#28楼

根据docs ， .blur()作用远超过<input>标记。例如：

$('.form_wrapper').blur(function(){$(this).hide();
});

#29楼

您可以做的是将click事件绑定到文档，如果单击了下拉菜单之外的内容，则会隐藏该下拉列表，但是如果单击下拉列表中的某些内容，则不会隐藏该下拉列表，因此您的“ show”事件（或slidedown或其他原因）显示下拉菜单）

    $('.form_wrapper').show(function(){$(document).bind('click', function (e) {var clicked = $(e.target);if (!clicked.parents().hasClass("class-of-dropdown-container")) {$('.form_wrapper').hide();}});});

然后在隐藏它时，取消绑定click事件

$(document).unbind('click');

#30楼

遇到同样的问题，想出了这个简单的解决方案。它甚至可以递归工作：

$(document).mouseup(function(e)
{var container = $("YOUR CONTAINER SELECTOR");// if the target of the click isn't the container nor a descendant of the containerif (!container.is(e.target) && container.has(e.target).length === 0) {container.hide();}
});