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

クリックがログイン領域内またはボタン上にある場合、イベントはログイン領域を非表示にする2番目のハンドラーに到達しません。

Answer 3

どのようだ？

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

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