checkExternalClick正在做我想做的事情的反面？

Question

在尝试this questions's answer by Jason Striegel中给出的背景叠加后，我之前询问过如何在用户点击其外的任何位置时关闭框的问题。但它没有起作用，也没有得到太多的关注。我现在正试图从Aaron Ray给出的另一个答案中解决问题。他建议说 checkExternalClick。我已经设置好了，但是现在只要我点击里面的框就可以关闭这个盒子，而不是在外面的任何地方！

JS：

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

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

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

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

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;
}

HTML：

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

正如我所说，当用户在框内点击时，这将关闭该框。可是等等！如果他们点击外面，我认为它应该关闭盒子？

Answer 1

我不确定这是最好的方法，但问题是元素中的元素没有该ID。我认为这会解决它（未经测试）：

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

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

Answer 2

试试这个

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

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

});

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

function checkExternalClick(event)
{
   hideBox();
}

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