jQuery 通过单击页面上的任意位置关闭 DIV

Question

当我点击 email-signup 时，我想打开 email-signup-link 。然后，我想通过单击页面上的任意位置来关闭它，当然，框本身除外。

我在这个网站上四处张望，这个问题有多种解决方案，但我尝试过的每一个都会显示，然后立即隐藏我的 div。我一定做错了什么。

这是 HTML：

 <a href="#" id="email-signup-link">Sign Up</a>
<div id="email-signup">
    <div id="inner">
        <h2>E-mail Notifications</h2>
        <input class="" type="text" name="description" placeholder="Enter your e-mail address" id="description" />
        <a href="#">Sign Up</a>
    </div>
</div>

这是我的 Javascript：

 $('#email-signup').click(function(){
    e.stopPropagation();
});
$("#email-signup-link").click(function() {
    e.preventDefault();
    $('#email-signup').show();
});
$(document).click(function() {
    $('#email-signup').hide();
});

原文由 Aaron Salazar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

两件事情。你实际上没有定义 e ，所以你不能使用它。您还需要 stopPropagation 在您的其他点击处理程序中：

 $('#email-signup').click(function(e){
    e.stopPropagation();
});
$("#email-signup-link").click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    $('#email-signup').show();
});
$(document).click(function() {
    $('#email-signup').hide();
});​

http://jsfiddle.net/Nczpb/

原文由 James Montagne 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

$(document).click (function (e) {
    if (e.target != $('#email-signup')[0]) {
        $('#email-signup').hide();
    }
});

原文由 Alexander Varwijk 发布，翻译遵循 CC BY-SA 3.0 许可协议