javascript - 如何简单地实现 Google Logout 之类的“单击任意位置关闭”之类的功能？

Question

这是我的团队成员正在寻找的内容：如何提供像 GMail 这样的功能，您可以在其中单击电子邮件并打开 Logout div，其中包含一些额外的用户信息，当您单击文档之外的任何位置时，它会关闭该框（隐藏 div )?

Answer 1

实现这一点的最简单方法是为关闭盒子click的整体绑定一个处理程序，document同时为盒子绑定一个处理程序。在框的事件中，您停止单击事件的传播，因此：

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

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

演示： http: //jsfiddle.net/ThiefMaster/JTtXB/
请注意，您还需要停止传播任何打开框的点击事件，否则它将立即再次关闭。

Answer 2

可以使用以下代码实现：

HTML：

<a href="#" id="show-card">Dharmavir</a>
<div id="user-card" style="display:none">
    <p>
        Welcome Dharmavir,<br />
        ABC Software, Inc
    </p>
    <a href="#">Logout</a>
<div>

Javascript：

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

CSS：

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

可以在http://jsfiddle.net/dharmavir/tPdsE/上看到同样的 JSFiddle