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

您可能希望检查为主体触发的单击事件的目标，而不是依赖于停止传播。

类似：

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

此外，body元素可能不包括浏览器中显示的整个可视空间。如果您注意到您的单击没有注册，您可能需要为超文本标记语言元素添加单击处理程序。

你最好用这样的东西：

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

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

像这样的东西不会工作吗？

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

或

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

将解决方案更新为：

• 使用mouseenter和Mouseleave代替
• 的hover使用实时事件绑定

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

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

更光滑：

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

根据文件显示，.blur()比<input>标签更有效。例如：

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

您可以做的是将单击事件绑定到文档，如果单击了下拉列表之外的内容，则会隐藏下拉列表，但如果单击了下拉列表内的内容，则不会隐藏它，因此您的“显示”事件（或幻灯片或任何显示下拉列表的内容）

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

然后隐藏它时，取消绑定单击事件

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

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

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

$(document).ready(function() {
$('.headings').click(function () {$('#sub1').css("display",""); });$('.headings').click(function () {return false;});$('#sub1').click(function () {return false;});$('body').click(function () {$('#sub1').css("display","none");
})});

我想这会容易得多。我是这样做的：

$(':not(.form_wrapper)').click(function() {$('.form_wrapper').hide();});

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

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

如果您在iOS上遇到问题，mouseup无法在Apple设备上运行。

jQuery中的mousedown /mouseup是否适用于iPad？

我使用这个：

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

这是我在另一个线程上找到的jsfiddle，也适用于esc key：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()}})

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

p是元素名。其中也可以传递id、class或元素名。

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

我是这样做的：

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

alleswasdenlayeronclicknichtschliessensoll.click( function () {close = false;});
});

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

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

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

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

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

这也适用于触摸设备，只要确保您没有在选择器列表中包含.form_wrapper的父级。

<!DOCTYPE html><html><head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><script>$(document).ready(function(){$("#hide").click(function(){$("p").hide();});$("#show").click(function(){$("p").show();});});</script></head><body><p>If you click on the "Hide" button, I will disappear.</p><button id="hide">Hide</button><button id="show">Show</button></body></html>

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

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

现场演示

检查单击区域不在目标元素或其子元素中

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

（只是补充了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();}});

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

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

文件

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

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

所以你的超文本标记语言看起来像：

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

切换常规和触摸设备

我在这里读了一些答案，并创建了一些用于div的代码，作为弹出气泡。

$('#openPopupBubble').click(function(){$('#popupBubble').toggle();
if($('#popupBubble').css('display') === 'block'){$(document).bind('mousedown touchstart', function(e){if($('#openPopupBubble').is(e.target) || $('#openPopupBubble').find('*').is(e.target)){$(this).unbind(e);}else if(!$('#popupBubble').find('*').is(e.target)){$('#popupBubble').hide();$(this).unbind(e);}});}});

您还可以使用类使其更加抽象，并根据触发单击事件的按钮选择正确的弹出气泡。

$('body').on('click', '.openPopupBubble', function(){$(this).next('.popupBubble').toggle();
if($(this).next('.popupBubble').css('display') === 'block'){$(document).bind('mousedown touchstart', function(e){if($(this).is(e.target) || $(this).find('*').is(e.target)){$(this).unbind(e);}else if(!$(this).next('.popupBubble').find('*').is(e.target)){$(this).next('.popupBubble').hide();$(this).unbind(e);}});}});

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

通过使用此代码，您可以根据需要隐藏尽可能多的项目

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

建立在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);}});}

这增加了几件事情…

1. 放置在带有“无限”参数的回调函数中
2. 添加了对jQuery的. off（）的调用，并与事件命名空间配对，以在事件运行后从文档中解除绑定。
3. 包括用于移动功能的触摸端

我希望这能帮助别人！

这么多的答案，一定是通过权添加了一个…我没有看到当前（jQuery 3.1.1）的答案-所以：

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

复制自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");}})})

这个解决方案应该工作得很好，很容易：

jQuery(document).ready(function($) {jQuery(document).click(function(event) {if(typeof  jQuery(event.target).attr("class") != "undefined") {var classnottobeclickforclose = ['donotcountmeforclickclass1', 'donotcountmeforclickclass2','donotcountmeforclickclass3'];var arresult = jQuery.inArray(jQuery(event.target).attr("class"), classnottobeclickforclose);if (arresult < 0) {jQuery(".popup").hide();}}});});

在上面的代码更改donotcountmeforclickclass 1，donotcountmeforclickclass 2等与类，你用来显示弹出或在它的点击弹出不应该影响，所以你一定要添加类，你用来打开弹出。

将. popup类更改为popup类。

我正在处理一个搜索框，根据处理后的关键字显示自动完成。当我不想单击任何选项时，我会使用下面的代码来隐藏处理后的列表，它可以工作。

$(document).click(function() {$('#suggestion-box').html("");});

建议框是我的自动完成容器，我在其中显示值。

将接受的答案与弹窗一起使用时，您可能会遇到一些问题。在某些情况下，单击随机位置可能会导致不需要的操作，即错误地单击按钮可能会将您带到新页面。

我不确定这是否是最有效的解决方案，但为了防止这种情况，我建议使用掩码。确保屏幕掩码位于<body>标记的正下方，以便它可以覆盖width:100%; height: 100%的所有屏幕。还要注意，它位于z-index: 99.如果您希望在屏幕掩码激活时可以单击另一个项目或div的所有元素之上，只需将高z指数分配给该项目或div。

屏幕掩码最初不显示（displayed:none），当单击时它会调用隐藏函数（onclick="hidemenu()"）。

<body><div class="screenmask" onclick="hidemenu()" style="position:fixed; width: 100%; height: 100%; top: 0px; right: 0px; display: none; z-index: 99;"></div>

处理"同一页面上的多个不同的弹出菜单"的javascript函数可能如下所示：

<script>// an element with onclick="showmenu('id_here')" pops a menu in the screenfunction showmenu(id) {var popmenu = document.getElementById(id); // assume popmenu is of class .cardmenu$('.cardmenu').hide();   // clear the screen from other popmenus first$(popmenu).show();          // pop the desired specific menu$('.screenmask').show(); // activate screenmask}    
function hidemenu() {      // called when clicked on the screenmask$('.cardmenu').hide();   // clear the screen from all the popmenus$('.screenmask').hide(); // deactivate screenmask}</script>

这么多的答案我无法使用。相反，我接受了接受的答案（效果很好）并缩短为（使用后代选择器）：

$(document).mouseup(function(e){if (!$(e.target).is("#targetSelector,#targetSelector *")) {$('#targetSelector').hide();}});

由于它仅以用户交互速度运行，因此没有必要分配给变量

var $container = $("#popup_container");
$container.click(function(e) {if (e.target.id == $container.attr("id")) {$(this).hide();}});

#popup_container {background: rgba(200,200,200,0.6);width: 100vh;height: 100vh;position: fixed;display: flex;justify-content: center;align-items: center;}
#popup {background: yellow;border: 1px solid black;position: absolute;width: 50%;height: 50%;display: flex;justify-content: center;align-items: center;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="popup_container"><div id="popup">Popup</div></div>

https://jsfiddle.net/041pj7re/