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

我试图通过仅单击div外部来关闭div，但它也通过单击子元素来隐藏自己

曼尼什语

window.addEventListener（“鼠标”，函数（e）{
var div=document.getElementById（“主容器”）；
if（e.target！=div&&e.target.parentNode！=div）{
div.style.left=“-300px”；
}
});

parentNode

仅提供元素的直接父元素，在这种情况下，如果可以是ul、li或内部div。相反，您可以使用

offsetParent

，它提供具有非静态位置的最近父元素

window.addEventListener（“鼠标”，函数（e）{
var div=document.getElementById（“主容器”）；
if（e.target！=div&&e.target.offsetParent！=div）{
div.style.left=“-300px”；
}
});
#主容器{
位置：绝对位置；
边框：1px实心#000；
}

曼尼什语







但不是log.innerHTML='OUTSIDE'；你把你的线藏起来了

<style>
  #main-container {
    border: 1px solid red;

  };
  #profile-div {
    border: 1px solid blue;
  };
</style>
<div id="log"></div>
<div id="main-container">
  <div id="profile-div">
    <div id="user-pic"></div>
    <span id="user-name">MANISH</span>
  </div>
    <ul>
    <li><a href="#"><i class="fa fa-user-circle fa-2x"></i>Dahsbord</a></li>
    <li><a href="#"><i class="fa fa-bell fa-2x"></i>Notification</a></li>
    <li><a href="#"><i class="fa fa-comments fa-2x"></i>Contact us</a></li>
    <li><a href="#"><i class="fa fa-wrench fa-2x"></i>Update Account</a></li>
    <li><a href="#"><i class="fa fa-lock fa-2x"></i>Logout</a></li>
    </ul>
  </div>
  </div>
  <script>
   window.onload = function(e) {
    var div = document.getElementById("main-container");
    var id = "main-container";
    var log = document.getElementById("log");

     window.addEventListener("mouseup", function(e) {
       if( checkParents(e.target, id)) {
         log.innerHTML = 'INSIDE';
       }
       else {
         log.innerHTML = 'OUTSIDE';
       }

     },
     false);

     function checkParents(elm, id) {
       var parent = elm;
       do {
         if(parent.id == id) {
           return true;
         }
         if(parent == window) {
           return false;
         }
       } while(parent = parent.parentNode) ;
     }
   } 
</script>


#主容器{
边框：1px纯红；
};
#档案室{
边框：1px纯蓝色；
};
曼尼什语







window.onload=函数（e）{
var div=document.getElementById（“主容器”）；
var id=“主容器”；
var log=document.getElementById（“日志”）；
window.addEventListener（“mouseup”，函数（e）{
if（检查父项（如目标、id））{
log.innerHTML='INSIDE'；
}
否则{
log.innerHTML='外部'；
}
},
假）；
函数检查父对象（elm，id）{
var parent=elm；
做{
if（parent.id==id）{
返回true；
}
如果（父项==窗口）{
返回false；
}
}while（parent=parent.parentNode）；
}
}