jQuery：如果在其他地方检测到点击，则隐藏弹出窗口答案

【问题标题】：jQuery: Hide popup if click detected elsewherejQuery：如果在其他地方检测到点击，则隐藏弹出窗口
【发布时间】：2020-05-13 16:23:42
【问题描述】：

如果用户单击弹出窗口或其子项之外的任何位置，我会尝试隐藏 div。这是我到目前为止的代码：

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

这适用于 .popup div，但如果单击它的任何子元素，它仍然会隐藏它。

【问题讨论】：

标签： jquery

【解决方案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

【讨论】：

一个小建议是写 $(".popup:visible").fadeOut().removeClass("active"); - 我遇到了一些问题，它再次出现只是为了再次淡出。
这似乎是一个很好的解决方案，但是，当基于点击事件的弹出窗口中需要发生一些事情时，我遇到了问题。具体来说，我有一个 Rails 应用程序，并且在弹出窗口中的表单上使用 :remote => true 。在这种情况下，使用 e.stopPropagation() 时 AJAX 功能会中断。在找到这个问题之前，我已经创建了stackoverflow.com/questions/5904602/…。有什么办法吗？
... 我的意思是说“在弹出窗口中的 'destroy' link_to 上使用 :method => :delete, :remote => true ...”
我认为第一行应该是 $('html')，否则用户可以点击浏览器中不属于正文的区域。如果正文没有填满整个浏览器窗口，就会发生这种情况。
有一些更简单的解决方案不会阻止事件传播。停止事件传播可能会导致意想不到的后果。更多在这里 - css-tricks.com/dangers-stopping-event-propagation

【解决方案2】：

我为此使用了一个非常简单的代码：-

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

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

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

谢谢！！

【讨论】：

最佳解决方案，其他将停止弹出窗口内的所有点击绑定

【解决方案3】：

以下是针对某些情况的潜在解决方案。弹出窗口必须设置 tabindex 才能正常工作，并且其中不能有任何“可聚焦”元素。

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

http://jsfiddle.net/d6zw3/

【讨论】：

【解决方案4】：

复习布尔逻辑！ :)

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

【讨论】：

我原以为 $.fn.is 会返回布尔值。它是如何发挥这种魔力的？

【解决方案5】：

这样做：

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

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案7】：

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

这就是我的解决方案

【讨论】：

【解决方案8】：

从 jQuery 1.7 开始，有 on() 处理程序，以下对我有用，假设可见弹出窗口包含类 '.activePopup'：

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

【讨论】：

【解决方案9】：

这里是代码 sn-p，它可能对 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>

【讨论】：

我们也可以在jQuery(document).ready(function(){})中添加这段代码；

【解决方案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>

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案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);

【讨论】：