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

【问题标题】：jQuery Close DIV By Clicking Anywhere On PagejQuery 通过单击页面上的任意位置关闭 DIV
【发布时间】：2012-03-15 08:46:21
【问题描述】：

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

我在这个网站上环顾四周，这个问题有多种解决方案，但我尝试过的每一个都显示然后立即隐藏我的 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();
});

【问题讨论】：

标签： javascript jquery html javascript-events

【解决方案1】：

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

虽然你最好在弹出窗口后面添加某种覆盖层并将上述点击事件绑定到它。

【讨论】：

如果您打算这样做，请使用 $(':not(#email-signup)')。
为什么？ .not() 方法最终将为您提供比将复杂的选择器或变量推入 :not() 选择器过滤器更易读的选择。在大多数情况下，这是一个更好的选择。
另外，如果页面上有很多标签，-1 表示可能添加数千个事件侦听器。
因为你先选择了所有的标签，然后再进行另一个函数调用，$(:not(#id)) 的可读性怎么不如$("*").not('#id')？这就像选择数据库中的所有条目并手动过滤，而不是让数据库只选择您需要的内容。
jsperf.com/jquery-css3-not-vs-not 看起来两者之间的差异已经足够重要了。谢谢

【解决方案2】：

我经常看到这样做的方法是用 div 覆盖表单后面的页面（通常是灰色的）。有了这个，你可以使用：

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

...或类似的东西。

【讨论】：

【解决方案3】：

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

【讨论】：

有人能解释一下[0] 在这个解决方案中扮演什么角色吗？ @亚历山大？谢谢
jQuery 选择器 ($()) 总是返回一个数组。 [0] 仅选择此数组的第一个元素。如果正确使用 ID，这应该是唯一的结果。

【解决方案4】：

两件事。你实际上没有定义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/

【讨论】：

只是提醒e.stopPropagation(); 有时会导致不必要的事件。所以说如果您点击关闭#email-signup 并打算点击提交e.stopPropagation(); 将阻止您的表单提交。
@codenamejames 如果您单击关闭#email-signup，则根本没有stopPropagation，所以您会没事的。 stopPropagation 只会阻止事件冒泡 DOM。除非您的提交按钮在某种程度上是 #email-signup 的父级，否则您的示例永远不会成为问题。
蒙太奇你是对的。感谢您的反馈:-)

【解决方案5】：

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 帖子中引用...

【讨论】：