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

我想打开电子邮件注册时，我点击电子邮件注册链接。然后我想通过点击页面上的任何地方来关闭它，当然，除了框本身

我在这个网站上到处看看，有很多解决这个问题的方法，但我尝试过的每一个方法都会立即显示并隐藏我的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>

尽管你最好在弹出窗口后面有一个覆盖，并将上面的点击事件绑定到该窗口

var mouse_is_inside = false;

$(document).ready(function()
{
    $('.form_content').hover(function(){ 
        mouse_is_inside=true; 
    }, function(){ 
        mouse_is_inside=false; 
    });

    $("body").mouseup(function(){ 
        if(! mouse_is_inside) $('.form_wrapper').hide();
    });
});

---

正如另一篇stackoverflow文章中提到的…

两件事。您实际上没有定义e，因此无法使用它。您还需要在另一个单击处理程序中使用StopRopagation：

$('#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();
});​

---

我经常看到这样做的方式是在表单后面的页面上覆盖一个通常灰显的div。有了这些，您可以使用：

$("#greydiv")..click(function() {
    $("#email-signup").hide();
    $("#greydiv").hide();
});

---

…或者类似的东西。

如果你要这样做，请用$'：notemail注册。为什么？.not方法最终将为您提供比将复杂选择器或变量推入：not选择器过滤器更可读的选择。在大多数情况下，它是一个更好的选择。此外，-1用于在页面上有很多标记时潜在地添加数千个事件侦听器。因为您首先选择所有标记，然后进行另一个函数调用，$：notid的可读性如何低于$*。而不是'id'？这就像选择数据库中的所有条目并手动筛选，而不是让数据库只选择您需要的内容。看起来这两者之间的差异已经足够大了。谢谢。请解释[0]在此解决方案中扮演的角色@亚历山大？感谢jQuery选择器$始终返回一个数组。[0]只选择此数组的第一个元素。如果ID使用正确，这应该是唯一的结果；有时会导致不必要的事件。所以说，如果你点击关闭电子邮件注册，并打算点击提交e.stopPropagation；将阻止您提交表单。@codenamejames如果您单击“关闭电子邮件注册”，则根本不会停止提交，这样您就可以了。stopPropagation仅阻止事件在DOM中冒泡。除非你的提交按钮是电子邮件注册的家长，否则你的例子永远不会有问题。蒙太奇你是对的。感谢您的反馈：-

$('#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();
});​

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

$("#greydiv")..click(function() {
    $("#email-signup").hide();
    $("#greydiv").hide();
});