点击div外部时隐藏它

Question

这个问题已经被多次问及，但没有一个答案对我有效。

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 时，它也会消失，不知道为什么，但确实会这样。
还有其他什么可能起作用吗？

- Gooey

Answer 1

由于您的目标元素具有 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();
    }
});

- thecodeparadox

---

一个问题很棘手（到目前为止它工作得很完美），但是当您单击<h1>标签或仅文本时，它也会消失（逻辑）。这个问题有解决方法吗？ - Gooey

@GooeyпјҢеҚіinfo divдёӯзҡ„h1ж ҮзӯҫжҲ–textпјҹ - thecodeparadox

是的，如果我现在点击文本（无论是纯文本还是<h1>标签之间的文本），该div也会隐藏。是否有一种方法可以让该div的“子元素”也成为“不隐藏”的功能的一部分？ - Gooey

谢谢，更新后的代码可以很好地处理子元素。 - Jurica Krizanic

Answer 2

为了确保您的解决方案在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){
  ...
});

- Andy Lorenz

Answer 3

为 document 对象添加一个 onclick 事件处理器：

$(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元素。

- Robert

Answer 4

尝试这段代码，这是我认为最好的。

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

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

- Ken Avila

Answer 5

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

- Ahmad.Iftikhar

Answer 6

一个使用纯JavaScript的解决方案，无需使用JQuery：

const hide = (elem) => {
    elem.style.display = 'none';
};

document.addEventListener('click', (event) => {
  const menuContainer = document.getElementById('menuContainer');
  if (!menu.contains((event.target))) {
    hide(menuContainer)
  }
});

- vanderdill

Answer 7

尝试以下解决方案。它甚至支持递归:

$(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://dev59.com/SnM_5IYBdhLWcg3wXyDZ#7385673

- Sam G

---

这是一个纯粹的复制，没有任何参考资料。https://dev59.com/SnM_5IYBdhLWcg3wXyDZ#7385673 - Tree Nguyen