jQuery：隐藏popup如果点击检测到其他地方

我试图隐藏一个div如果用户点击任何地方，但popup或OR它的孩子。 这是迄今为止的代码：

$("body").click(function(){ var $target = $(event.target); if(!$target.is(".popup") || !$target.is(".popup").children()){ $("body").find(".popup").fadeOut().removeClass('active'); } }); 

它适用于.popup div，但是如果点击了它的任何一个子项，它就会隐藏它。

Answer 1

你真的可以简化这一点我认为：

 // If an event gets to the body $("body").click(function(){ $(".popup").fadeOut().removeClass("active"); }); // Prevent events from getting pass .popup $(".popup").click(function(e){ e.stopPropagation(); }); 

点击popup窗口或其任何孩子将导致传播到达身体之前停止。

停止事件传播的演示： http : //jsbin.com/ofeso3/edit

Answer 2

我正在使用一个非常简单的代码：

 $(document).click(function(e){ if($(e.target).closest('#popupdivID').length != 0) return false; $('#popupdivID').hide(); }); 

这对下拉菜单也很有用。 如果您点击下拉菜单并查看列表，然后点击文档中的其他位置，则应closures该下拉菜单。 我也使用了相同的代码。

谢谢！！

Answer 3

刷你的布尔逻辑！ 🙂

 if(!$target.is(".popup") && !$target.parents().is(".popup")) 

Answer 4

做这个：

 $(document).click(function (e) { // show_alerts is the class of the link to display the popup if (!$(e.target).parents().andSelf().is('.show_alerts')) { // hide your popup } }); 

例如： http : //jsfiddle.net/Acf3F/

Answer 5

这是某些情况下的潜在解决scheme。 popup窗口必须设置tabindex才能正常工作，里面不能有任何“focusable”元素。

 $('a').click(function() { $('.popup').show().focus(); }); $('.popup').blur(function() { $(this).hide(); }); 

http://jsfiddle.net/d6zw3/

Answer 6

我们正在使用这个来显示一个popup的点击，然后隐藏它，一旦你再次点击相同的button或点击外部。

 function togglePopup(){ var selector = '#popup', $popup = $(selector), callback = function(e) { if (!$(e.target).parents().andSelf().is(selector)) { $popup.hide(); $(document).off('click', callback); } }; $popup.toggle(); if ($popup.is(':visible')) { $(document).on('click', callback); } return false; } 

Answer 7

 $("body").click(function(event ){ var $target = $(event.target); if(!$target.parents().is(".popup") && !$target.is(".popup")){ $("body").find(".popup").hide(); } }); 

这是我的解决scheme

Answer 8

从jQuery 1.7开始，就有on（）处理程序，下面的例子适用于我，假设一个可见的popup窗口包含类“.activePopup”：

 $('body').on('click', ":not(.activePopup)", function(e){ e.stopPropagation(); //do your hiding stuff }); 

Answer 9

这是可能有助于html结构的代码片段

 <script> jQuery(document).click(function() { jQuery(".main-div-class .content").css("display","none"); }); jQuery(".main-div-class .content").click(function (e) { e.stopPropagation(); //do redirect or any other action on the content }); jQuery(".main-div-class h4").click(function(e) { e.stopPropagation(); jQuery(this).parent().find(".content").show(); }); </script> <div class="main-div-class"> <h4>click here</h4> <div class='content'>to show content here like this "<a href="http://stackoverflow.com/questions/2329816/jquery-hide-popup-if-click-detected-elsewhere#new-answer">Click</a>" or any other type of content</div> </div> 

Answer 10

所以更新的代码可能是这样的

 <script type="text/javascript"> jQuery(document).ready(function(e) { jQuery(document).click(function() { jQuery(".main-div-class .content").css("display","none"); }); jQuery(".main-div-class .content").click(function (e) { e.stopPropagation(); //do redirect or any other action on the content }); jQuery(".main-div-class h4").click(function(e) { e.stopPropagation(); jQuery(this).parent().find(".content").show(); }); }); </script> <div class="main-div-class"> <h4>click here</h4> <div class='content'>to show content here like this "<a href="http://stackoverflow.com/questions/2329816/jquery-hide-popup-if-click-detected-elsewhere#new-answer">Click</a>" or any other type of content</div> </div> 

Answer 11

我在这里遇到了所有解决scheme的问题，所以在经历了一些挫折之后， 我从一个稍微不同的方向来处理这个问题。

我特别不喜欢附加点击事件的身体或文件和event.target是不够可靠的。 我也不想使用stopPropagation（），因为我不想干涉其他事件。

以下是我如何解决它，希望它有帮助：

标记

 <div id="ModalBG"></div> <div id="Modal">Content Here</div> 

JavaScript的

 function showModal(){ $("#Modal, #ModalBG").show(); } $("#ModalBG").click(function () { $("#Modal, #ModalBG").hide() }); 

CSS

 #Modal{ z-index: 99; } #ModalBG{ opacity: 0; position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; width: 100%; height: 100%; z-index: 98; display: none; }