当用户点击它时，使用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内的链接，当他们点击时不再工作。

Answer 1

有同样的问题，想出了这个简单的解决scheme。 它甚至工作recursion：

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

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

Answer 3

您可能需要检查点击事件的目标，而不是依靠stopPropagation。

就像是：

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

此外，身体元素可能不包括浏览器中显示的整个视觉空间。 如果您注意到您的点击没有注册，您可能需要添加HTML元素的点击处理程序。

Answer 4

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

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

Answer 5

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

Answer 6

现场演示

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

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

更新：

jQuery停止传播是最好的解决scheme

现场演示

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

Answer 7

更新了解决scheme：

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

Answer 8

最stream行的答案是没有jQuery的解决scheme：

 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

Answer 9

现场演示与ESCfunction

适用于桌面和手机

 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();如果在某些情况下需要确保元素真的可见if($pop.is(':visible') && (notH||e.which==27)) $pop.hide();}

Answer 10

会不会有这样的工作？

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

要么

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

Answer 11

即使是sle </s>：

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

Answer 12

这是我在另一个线程上find的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() } }) 

Answer 13

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. 放置在一个带有“unlimited”参数的callback函数中
2. 添加了一个调用jquery的.off（）与事件命名空间配对，从文档中解除事件一旦运行。
3. 包括手机function的touchend

我希望这可以帮助别人！

Answer 14

而对于像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(); } }); 

Answer 15

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

Answer 16

如果你在使用ios时遇到问题，mouseup在苹果设备上不起作用。

在jQuery的工作ipad的mousedown / mouseup吗？

我使用这个：

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

Answer 17

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

p是元素名称。 哪里可以传递id或类或元素名称。

Answer 18

如果您点击.form_wrapper，则返回false：

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

Answer 19

我是这样做的：

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

Answer 20

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

Answer 21

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

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

这也可以在触摸设备上工作，只要确保你没有在你的select器列表中包含.form_wrapper的父项。

Answer 22

 <!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> 

Answer 23

我想最喜欢的build议，但它不适合我。

这种方法几乎相同，但为我工作。 http://www.codesynthesis.co.uk/code-snippets/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it

Answer 24

（只要加上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(); } }); 

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

Answer 25

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

Answer 26

您可以将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(); }); 

Answer 27

通过使用这个代码，你可以隐藏尽可能多的项目，你想要的

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

Answer 28

 $(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> 

Answer 29

你可以做的是将一个点击事件绑定到文档，如果点击下拉外的东西，将隐藏下拉菜单，但不会隐藏它，如果点击下拉内的东西，所以你的“显示”事件（或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'); 

Answer 30

根据文档 ， .blur()比<input>标签的作用更大。 例如：

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