在外部单击时隐藏 div

Posted 2023-02-21

【中文标题】在外部单击时隐藏 div

【英文标题】：Hide a div when clicked outside of it

【发布时间】：2012-07-17 17:35:50

【问题描述】：

这个问题已被问过多次，但似乎没有一个答案对我有用。

div的css如下：

#info
  display: none;
  position: fixed;
  z-index: 500;
  height: 50%;
  width: 60%;
  overflow: auto;
  background: rgba(187, 187, 187, .8);

我尝试使用以下代码：

$("#info").click(function(e)
  e.stopPropagation();
);

$(document).click(function()
  $("#info").hide();
);

还有这段代码：

$(document).mouseup(function (e)
    var container = $("#info");

    if (container.has(e.target).length === 0) 
        container.hide();
    
);

然而，每当我点击 div 时，它也会消失，不知道为什么，但确实如此。 还有什么可能有用的吗？

【参考方案1】：

尝试以下解决方案。它甚至可以递归工作：

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

参考 - https://***.com/a/7385673/3910232

【讨论】：

这是一个纯副本，没有任何参考。 ***.com/a/7385673/4103909

【参考方案2】：

您可以添加一个类，仅用于检查鼠标单击该特定 div 或该 div 元素中的任何单击与否。

$(document).click(function(e)            
    if ( !$(e.target).hasClass("[class name for check]") &&
         $("[element class or id]").css("display")=="block" ) 
            //...code if clicked out side div
    
);

【参考方案3】：

试试这个代码，这对我来说是最好的。

jQuery('.button_show_container').click(function(e) 
    jQuery('.container').slideToggle('fast'); 
    e.stopPropagation();
);

jQuery(document).click(function() 
        jQuery('.container').slideUp('fast');
);

【参考方案4】：

为确保您的解决方案也适用于 iPad，您需要改用以下函数触发器：

$(document).on("mousedown touchstart",function(e)
  var $info = $('#info');
  if (!$info.is(e.target) && $info.has(e.target).length === 0) 
    $info.hide();
  
);

同样，如果您想掩盖 mouseup，请添加“touchend”：

$(document).on("mouseup touchend",function(e)
  ...
);

【参考方案5】：

因为你的目标有id=info，所以你可以试试：

$(document).click(function(e) 

  // check that your clicked
  // element has no id=info

  if( e.target.id != 'info') 
    $("#info").hide();
  
);

你也可以试试：

$(document).click(function() 

  if( this.id != 'info') 
    $("#info").hide();
  

);

根据评论

$(document).click(function(e) 

    // check that your clicked
    // element has no id=info
    // and is not child of info
    if (e.target.id != 'info' && !$('#info').find(e.target).length) 
        $("#info").hide();
    
);

【讨论】：

一个问题很棘手（到目前为止它工作得很好）但是当你点击一个

@Gooey 即h1 标签或text 在info div 内？

是的，如果我现在点击文本（纯文本或

谢谢，更新后的代码适用于子元素。

【参考方案6】：

将onclick 事件处理程序附加到document 对象：

$(document).click(function(e)    
    if(e.target.id != 'info') 
        $("#info").hide();   
     
);

演示：http://jsfiddle.net/aUjRG/

这是一个纯 javascript 的解决方案，可帮助您更好地了解发生了什么：

function hideInfo()
    if(window.event.srcElement.id != 'info')
        document.getElementById('info').style.display = 'none';
    


document.onclick = hideInfo;

演示：http://jsfiddle.net/mmzc8/

两种解决方案都将检查用户单击的位置是否位于 ID 为 info 的元素上。假设用户没有点击info元素，则隐藏info元素。