Javascript 如何简单地实现谷歌的注销之类的；单击任意位置以关闭"；什么样的功能？

以下是我的团队成员想要了解的：如何提供GMail这样的功能，您点击电子邮件，它会打开带有一些附加用户信息的注销div，当您点击文档之外的任何位置时，它会关闭该框（隐藏div）？

可以使用以下代码实现：

HTML:

CSS:

---

JSFiddle可以在

上看到，实现这一点的最简单方法是为整个

文档

绑定一个

点击处理程序，该处理程序关闭框，也为框绑定一个。在框的事件中，停止单击事件的传播，以便：

$(document).on('click', function() {
    $('#box').hide();
});

$('#box').on('click', function(e) {
    e.stopPropagation();
});

演示：

请注意，您还需要停止传播打开该框的任何单击事件，否则它将立即关闭。
将事件绑定到事件处理程序中通常是一个非常糟糕的主意。@ThiefMaster感谢您提醒我这一点，我真的错过了这一点，因为我匆忙丢失了之前的小提琴。我已经更正了这里的代码以及小提琴上的代码。你可以检查一下。我不想把一件事和另一件事绑在一起。他们只是肩并肩，但在工作时却没有被注意到。再次感谢。我理解这一点，这就是为什么我使用MouseUp和MouseDown事件，所以我不需要使用停止传播。上述方法的另一个问题是$（'#box'）.hide（）；将在每次单击文档中的任何位置时调用。所以如果你想阻止它，你必须解开它。我已经更新了你们的小提琴，以显示我想告诉你们的：用我创造的小提琴，你们不会发现那个问题。让我知道我们是否能想出比目前为止我们两人都更好的方法。无需解开它-如果框不可见，它不会做任何事情。我知道它不会做任何事情，除了为什么在每次单击文档时都要执行该行？这是一个问题吗，您单击的唯一时间是在离开页面或使用表单时。
$(document).ready(function(){
    // To show user-box
    $("#show-card").mouseup(function(){
        $("#user-card").show();

        // To hide user-box
        $(document).mousedown(function(){
            $("#user-card").hide();
            $(this).unbind("mousedown");
        })
    });
});

#user-card {
    height:75px;
    width:200px;
    border:solid 1px #ccc;
}

$(document).on('click', function() {
    $('#box').hide();
});

$('#box').on('click', function(e) {
    e.stopPropagation();
});