点击div之外的区域就隐藏这个div

最新推荐文章于 2019-09-17 16:10:29 发布

weixin_30825581

最新推荐文章于 2019-09-17 16:10:29 发布

阅读量175

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/blog4xy/p/4059258.html

版权

发现一个比较不错的方法，记录一下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
  <style type="text/css">
   * { padding:0; margin:0; }
   #box { position:relative; margin:50px; }
   #pop { display:none; position:absolute; left:200px; top:100px; width:120px; height:120px; border:2px solid #ccc; background:#eee; }
  </style>
  <script type="text/javascript">
    window.onload=function(){
      var oBox=document.getElementById("box");
      var obj=document.getElementById("pop");
      var oBtn=document.getElementById("click");
      
      oBtn.onclick=function(){
        obj.style.display="block";
      }    
      document.onclick=function(event){
        //
        var e=event || window.event;//兼容ie和非ie的event
        var aim=e.srcElement || e.target; //兼容ie和非ie的事件源
        //
        if(e.srcElement){
         var aim=e.srcElement;
          if(aim!=oBtn && aim!=obj){
            obj.style.display="none";
          }
        }else{
          var aim=e.target;
          if(aim!=oBtn && aim!=obj){
            obj.style.display="none";
          }
        }
      }     
    }
  </script>
</head>
<body>
    <div id="box">
    <a href="javascript:;" id="click" >点击弹出</a>
    <div id="pop">
      弹出层内容呢
    </div>
  </div>
</body>
</html>