Javascript 如何在元素外部单击时隐藏div

我有以下部门：

<div id="welcome-lightbox">
   <div id="content"></div>
</div>

---

然而，这种方法似乎不起作用；单击时，div仍然隐藏。有什么想法吗？

这是因为您仅在第一次单击文档后才注册该事件，并且文档被隐藏。因此，将特定元素的停止传播事件注册移到文档的单击处理程序之外

尝试：

或者你可以这样做：

$(document).click(function(e){
    if(e.target.id !== 'welcome-lightbox' )
        $('#welcome-lightbox').hide();
});

---

这是因为您仅在第一次单击文档后才注册该事件，并且文档被隐藏。因此，将特定元素的停止传播事件注册移到文档的单击处理程序之外

尝试：

或者你可以这样做：

$(document).click(function(e){
    if(e.target.id !== 'welcome-lightbox' )
        $('#welcome-lightbox').hide();
});

---

您可以通过将其设置为两层应用程序来实现这一点，外部div覆盖整个屏幕，就像覆盖一样，然后是内部div。在内部div上有一个单击事件，停止事件传播，但在外部div上有一个单击事件，关闭或隐藏自身。

您可以通过将其设置为两层应用程序来实现这一点，覆盖整个屏幕的外部div，如覆盖，然后是您的内部div。在内部div上有一个停止事件传播的单击事件，但在外部div上有一个关闭或隐藏的单击事件，本身。

在元素上方附加事件处理程序，然后检查

目标

，查看是否单击了

div

$(document).click(function(e){
    var divId = "welcome-lightbox";
    if(e.target.id != divId){
        $("#" + divId).hide();
    }
});

---

JS Fiddle:

在元素上方附加一个事件处理程序，然后检查

target

以查看是否单击了

div

$(document).click(function(e){
    var divId = "welcome-lightbox";
    if(e.target.id != divId){
        $("#" + divId).hide();
    }
});

---

JS Fiddle:

将单击处理程序附加到文档，并使用closest（）检查单击是否源自元素内部：

---

检查

事件。如果单击了灯箱中除灯箱本身以外的任何元素，则target

ID将关闭灯箱。

将单击处理程序附加到文档，并使用closest（）检查单击是否源自元素内：

$(document).click(function(e){
    var divId = "welcome-lightbox";
    if(e.target.id != divId){
        $("#" + divId).hide();
    }
});

---

检查

事件。如果单击灯箱中除灯箱本身以外的任何元素，target

ID将关闭灯箱。

我通常做的是创建另一个元素作为覆盖。由于lightbox的z-index值较高，单击覆盖意味着在lightbox之外单击。什么是

#welcome lightbox

，您肯定只想注册

#welcome lightbox

？您可以发布HTML吗。“也许也是一个JSFIDLE？”OfirBaruch。如果你在直接点击任何链接时使用这种方式，它将不起作用，首先会出现掩码点击，然后你必须再次点击它，最终用户会想为什么他必须点击2次我通常做的是创建另一个元素作为覆盖。由于lightbox的z-index值较高，单击覆盖意味着在lightbox之外单击。什么是

#welcome lightbox

，您肯定只想注册

#welcome lightbox

？您可以发布HTML吗。“也许也是一个JSFIDLE？”OfirBaruch。如果您直接点击任何链接时使用这种方式，它将不起作用，首先会发生掩码点击，然后您必须再次点击它，最终用户会想为什么他必须点击两次谢谢，我如何扩展第二个示例，以包括父#欢迎灯箱中所有元素的相同行为？（请参阅相关更新的DOM结构）@alias51您可以执行

$（文档）。单击（函数（e）{if（！$（e.target）.最近的（'welcome lightbox'）.length）$（'welcome lightbox'）.hide（）；）@adeneo aaaha我明白了…：）当我回答时，问题不是这个。当我看到OP的评论时，我回来回复，但现在当我看到你的评论时，我意识到有些难闻的东西，哈哈，然后我看到了你的答案。。但是，伟大的思想都是一样的！！！谢谢，我如何扩展第二个示例，使其包含父“欢迎”灯箱中所有元素的相同行为？（请参阅相关更新的DOM结构）@alias51您可以执行
$（文档）。单击（函数（e）{if（！$（e.target）.最近的（'welcome lightbox'）.length）$（'welcome lightbox'）.hide（）；）@adeneo aaaha我明白了…：）当我回答时，问题不是这个。当我看到OP的评论时，我回来回复，但现在当我看到你的评论时，我意识到有些难闻的东西，哈哈，然后我看到了你的答案。。但是，伟大的思想都是一样的！！！使用它是一种好的做法吗？”文档“单击，因为当您单击其他元素时，也会触发？如果您想在除某个元素之外的任何位置捕获单击，您没有太多选择使用该选项是一种良好的做法吗？”文档“点击”，因为当你点击其他元素时也会被触发？如果你想在某个元素以外的任何地方点击，你没有太多选择
$(document).click(function(e){
    var divId = "welcome-lightbox";
    if(e.target.id != divId){
        $("#" + divId).hide();
    }
});

$(document).on('click', function(e){
    if (! $(e.target).closest('#welcome-lightbox').length )
        $('#welcome-lightbox').hide();
});