javascript - checkExternalClick 正在做与我想要它做的相反的事情吗？

Question

我之前问过一个问题，在尝试了 this questions's answer by Jason Striegel 中给出的背景覆盖之后，如何在用户单击框外的任何地方时关闭框。 .但它没有用，也没有受到太多关注。我现在正试图从 Aaron Ray 给出的另一个答案中解决这个问题。他建议 检查外部点击。我已经设置好了，但现在只要我点击框内的任何地方，框就会关闭，而不是外面的任何地方!

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

试试这个

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

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

});

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

function checkExternalClick(event)
{
   hideBox();
}

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