javascript - 单击 div 外部等

Question

我希望登录区域（在下面的代码中）打开登录按钮单击。此外，当单击登录区域外的任何位置时，我需要隐藏登录区域，而不是登录按钮。

<button id="loginBtn">Login</button>

<div id="loginArea">
   <!-- here is login form -->
</div>

我怎样才能做到这一点？

Answer 1

使用：

$('body').on('click', '#loginBtn', function(){
    $('#loginArea').show();
});

将显示登录名，而当您在其外部单击时，以下内容将删除它：

$(document).on('click', 'body:not(#loginArea)', function(){
    $('#loginArea').hide();
});

Answer 2

$(function() {
    $('#loginBtn, #loginArea').on('click', function(e) {
        $('#loginArea').show();
        e.stopPropagation();
    });
    $('body').on('click', function() {
        $('#loginArea').hide();
    });
});

如果单击是在登录区域内或按钮上，则事件不会到达第二个处理程序以隐藏登录区域。

Answer 3

怎么样？

$('#loginBtn').click(function (e) {
   $('#loginArea').toggle();
   e.stopPropagation();
});

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