单击外部时如何隐藏 DIV 元素

我有一个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 http://jsbin.com/ilowij/7/

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

在 JavaScript 中click is a 冒泡事件 https://stackoverflow.com/a/5971675/1588233，它开始于div并上升到document。当您使用停止事件传播时stopPropagation()函数，不处理文档上的单击。因此，要解决您的问题，只需删除e.stopPropagation().

DEMO 1 http://jsfiddle.net/YcEjF/40/

最好的办法是：

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

DEMO 2 http://jsfiddle.net/YcEjF/41/

如果我点击这个div，如何点击外部并隐藏这个div ？

好吧，让我们想象一下，当您单击 id 为“wrapperId”的容器时，“myDiv”应该被隐藏：

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

如果容器是一个文档，您可以使用$(document)代替$("#wrapperId").

DEMO 3 http://jsfiddle.net/YcEjF/42/

它不起作用看看发生了什么：jsbin.com/ilowi​​j/7 http://jsbin.com/ilowij/7

单击按钮时应该停止单击事件传播。进行以下更改：

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

DEMO 4 http://jsbin.com/ilowij/8/