Javascript checkExternalClick做的与我希望它做的相反？

我之前问过一个问题，在尝试了中给出的背景覆盖后，当用户单击框以外的任何位置时，如何关闭框。但它不起作用，也没有受到多少关注。我现在试图从Aaron Ray给出的另一个答案来解决这个问题。他建议 选中ExternalClick。我已经设置好了，但是现在只要我点击盒子里面的任何地方，盒子就会关闭，而不是外面的任何地方

JS:

CSS:

HTML:

---

正如我所说，当用户在框内单击时，这将关闭框。但是等等！我认为如果他们在外部单击，应该关闭该框？

我不确定这是总体上最好的方法，但这里的问题是元素中的元素没有该ID。我认为这将修复它（未经测试）：

这应该检查您是否没有单击该元素或其中的任何元素。

试试这个

$(document).ready(function(){
    initHUDWindow();

    $("#box").click(function(e){
        e.stopPropagation();
    });

});

function initHUDWindow()
{
    $(document).click(checkExternalClick);  
}

function checkExternalClick(event)
{
   hideBox();
}

function hideBox()
{
   $(".BoxContainer").hide();
}

---

作为记录，虽然我的回答修正了发布的方法，但这通常是我更喜欢的方式。尽管我看不出有任何理由检查该框是否已经可见。@kingjiv-如果容器已经隐藏，为什么要查找并隐藏它？如果先检查更有效，我希望jquery会在

隐藏中添加该复选框（可能已经有了）。检查它是否隐藏可能和调用
hide
一样耗时。事实上，由于所需的时间可以忽略不计，代码在没有检查的情况下更干净。我同意你的看法。但是要调用hide，您仍然必须找到$（“.BoxContainer”）。无论如何，与干净的代码相比，时间可以忽略不计：）此解决方案在单击任意位置时停止了所有框隐藏。很抱歉我的CSS中没有专门定义的#box元素。唯一的地方是使用它是在HTML中，当我将box div id放在两个类box和BoxContainer周围时。我不知道你有没有看到。我发现如果你在包含一个单独元素的某个区域内单击，框会关闭（如果仍然在框内），但这个答案至少没有破坏功能。我不知道为什么这里会涉及css。javascript可以访问一个元素，不管是否定义了css。我也不确定，我肯定不是专家，否则我就不需要问这样愚蠢的事情。我认为问题实际上与我的程序如何抓取屏幕有关。这是一个大型游戏，我在一家公司下进行，所以这比盒子有很多。有了你的回答，我就明白了，所以我认为你的回答是最有帮助的。
.Box
{
position:absolute;
top:15%;
left:15%;
width:500px;
height:600px;
background-repeat:no-repeat;
z-index:2;
}


.BoxContainer
{
background-image:url('images/box.png');
z-index:2;
}

<div id = "box">
   <div class = "Box BoxContainer"></div> 
</div>

function checkExternalClick(event)
{
   var target = $(event.target);
   if(target[0].id != "box" && target.closest("#box").length === 0)
   {        
      hideBox();
   }
}

$(document).ready(function(){
    initHUDWindow();

    $("#box").click(function(e){
        e.stopPropagation();
    });

});

function initHUDWindow()
{
    $(document).click(checkExternalClick);  
}

function checkExternalClick(event)
{
   hideBox();
}

function hideBox()
{
   $(".BoxContainer").hide();
}