当我点击外面时如何隐藏DIV元素

Question

我有一个div,当我点击外面时想要隐藏它.我的代码是:

<div id="mydiv">The div must be above button</div>

    $('#mydiv').click(function(e) {
        e.stopPropagation();
    });

    $(document).click(function() {
        $('#mydiv').fadeOut(300);
    });

但这对我不起作用......

UPDATE

完整代码如下.当我点击一个按钮时会显示div上面的内容,所以div当我点击外面时我需要隐藏它.

DEMO

<div id="but" style="text-align: right;"><button type="button">Show Div!</button></div>
<div id="mydiv" style="display:none;">The div must be above button</div>

$("#but button").click(function(){
  var pos = $(this).offset(),
      div = $("#mydiv");

  // Make it visible off-page so
  // we can measure it
  div.css({
    "display": "block",
    "border": "1px solid black",
    "position": "absolute",
    "left": -10000,
    "top": 0
  });

  // Move it where we want it to be
  div.css({
    "left": pos.left - 40,
    "top":  pos.top - div.height() - 10
  });
});

$('#myDiv').click(function(e) {
    e.stopPropagation();
});
$(document).click(function() {
    $('#mydiv').fadeOut(300);
});

Answer 1

在javascript中,click是一个冒泡的事件,它从div开始并上传到文档.使用stopPropagation()函数停止事件传播时,不会处理文档上的单击.所以,要解决你的问题,请删除e.stopPropagation().

演示1

最好的方法是:

$('#mydiv').click(function(e) {
    e.stopPropagation();
    $(this).fadeOut(300);
});

演示2

如果我点击这个div,如何点击外面并隐藏这个div？

好吧,让我们想象一下,当你点击一个id为"wrapperId"的容器时,应该隐藏"myDiv":

$("#wrapperId").click(function(e){
  $('#mydiv').fadeOut(300);
})

如果容器是文档,则可以使用$(document)而不是$("#wrapperId").

演示3

它看起来不怎么样:jsbin.com/ilowi​​j/7

单击按钮时应停止单击事件传播.进行以下更改:

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

演示4

Answer 2

尝试使用以下检查事件目标的代码

 $(document).click(function(e) {
  if(e.target.id!="mydiv"){  // if click is not in 'mydiv'
    $('#mydiv').hide(3000);
  }
});