单击外部时隐藏div

This question has been asked multiple times, however none of the answers seem to work for me.

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

The css of the div is as follows:

div的css如下：

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

I tried to use the following code:

我试着使用以下代码：

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

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

as well as this code:

以及这段代码：

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

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

Yet whenever i click on the div it also disappears, no clue why but it does.
Any thing else that might work?

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

6 个解决方案

#1

As your target has id=info, so you can try:

由于您的目标有id = info，因此您可以尝试：

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

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

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

You can also try:

你也可以尝试：

$(document).click(function() {

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

});

According to comment

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

#2

Attach an onclick event handler to the document object:

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

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

Demo: http://jsfiddle.net/aUjRG/

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

Here is a solution in pure JavaScript to help you better understand what it happening:

以下是纯JavaScript中的解决方案，可帮助您更好地了解其发生的情况：

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

document.onclick = hideInfo;

Demo: http://jsfiddle.net/mmzc8/

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

Both solutions will check if the location that the user clicked was on the element with an ID of info. Assuming that the user did not click on the info element, then hide the info element.

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

#3

To ensure you have a solution that works on iPads too, then you need to use the following function trigger instead:

为了确保您的解决方案也适用于iPad，您需要使用以下功能触发器：

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

Similarly, if you are looking to cover off mouseup, add 'touchend':

同样，如果您想要覆盖鼠标，请添加'touchend'：

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

#4

Try this code, this is the best for me.

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

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

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

#5

You can add a class only for check on mouse click that specific div or any within that div element clicked or not.

您可以添加一个类，仅用于检查鼠标单击特定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
    }
});

#6

Try the below solution. It's even working recursive:

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

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

Reference - https://*.com/a/7385673/3910232

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