单击 div 外部和更多 [重复]答案

【问题标题】：Click outside of div and more [duplicate]单击 div 外部和更多 [重复]
【发布时间】：2013-02-28 01:04:44
【问题描述】：

我希望登录区域（在下面的代码中）在登录按钮单击时切换。另外，当点击登录区域外的任何地方时，我需要隐藏登录区域，而不是登录按钮。

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

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

我怎样才能做到这一点？

【问题讨论】：

@eomeroff：你有 1151 名代表——当然你现在应该知道人们会问你——“到目前为止你尝试过什么”......
如何使用选择器：不是？
@Westie 我没有 1151 了。而且我没有看到有人问我尝试了什么。如果我不知道如何尝试怎么办。这是无法研究的具体问题。老实说，我看不出5票反对的原因。希望这个问题对某人有用。
@Ravi 我无法使用 UI 模式对话框。谢谢。

标签： javascript jquery html dom

【解决方案1】：

使用：

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

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

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

【讨论】：

.remove() 将从 DOM 中删除 div。
@Dogoku 啊好抓！已更新。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

怎么样？

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

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

【讨论】：

这将隐藏登录框，即使您在其中单击也是如此。
不，它不会，e.stopPropagation() 停止将事件冒泡到另一个处理程序