Question

我试图隐藏div，如果用户点击任何地方但弹出窗口或它的孩子。这是我到目前为止的代码：

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

点击弹出窗口或其任何子节点会导致传播在到达身体之前停止。

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

Answer 2

我使用的代码非常简单： -

$(document).click(function(e){

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

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

谢谢！

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

这是某些情况的潜在解决方案。弹出窗口必须设置tabindex才能生效，并且内部不能有任何“可聚焦”元素。

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

http://jsfiddle.net/d6zw3/

Answer 6

我们使用此功能在点击时显示弹出窗口，然后再次单击同一按钮或在外面单击时隐藏它。

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

这是我的解决方案

Answer 8

从jQuery 1.7开始，有on（）处理程序，以下适用于我，假设一个可见的弹出窗口包含类'.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

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

我特别不喜欢将点击事件附加到正文或文档和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; }

Answer 12

我做了类似以下的事情。希望对别人有帮助

$('body').click(function(e) {
    $('className').click(function(){
         e.stopPropagation();
         $(this).data('clicked', true);
    })
if(!$('.className').data('clicked')){
    // do sth
 } else {
    // do sth else
 }
$('.className').data('clicked', false);

jQuery：如果在别处检测到点击，则隐藏弹出窗口

12 个答案: