层失去焦点后关闭

请高手帮忙看一下。在层外任意地方点击后关闭层（层外可能是空白的body，也可能有别的层或表单等元素），这样的js要怎么写？===============================================================================<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>点击空白地方放弃层</title>
<style type="text/css">
* {
margin:0;
padding:0;
font-size:12px;
}
#divSelect {
position:absolute;
left:200px;
top:70px;
width:300px;
height:30px;
text-align:center;
line-height:300%;
border:1px inset #777;
background-color:#edeceb;
z-index:1;
}
#divList {
position:absolute;
display:none;
left:200px;
top:110px;
width:300px;
height:200px;
text-align:center;
border:1px outset #fff;
background-color:#c0c8f7;
z-index:2;
}
#divList p {
margin-top:50px;
}
</style>
<script type="text/javascript">
<!--
function closeDiv(id){
document.getElementById(id).style.display="none";
}
function showDiv(id){
document.getElementById(id).style.display="inline";
}
-->
</script>
</head><body>
<div id="divSelect" onclick="showDiv('divList')">点击显示</div>
<div id="divList" onclick="closeDiv('divList')"><p>点击层外的任何地方关闭层</p><p>是层外的click事件不是层的onmouseout事件</p></div>
</body>
</html>

解决方案 »

  1.   

        window.onload = function () {
            document.body.addEventListener('click', function () {
                closeDiv("divList");
            }, false);
        }
      

  2.   

    if e.target !=div   div.close
      

  3.   

    改了一下，好像还有一个不足，就是点击层自身也会关闭掉哪里可以改一下吗？====================================
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>点击空白地方放弃层</title>
    <style type="text/css">
    * {
    margin:0;
    padding:0;
    font-size:12px;
    }
    #divSelect {
    position:absolute;
    left:200px;
    top:70px;
    width:300px;
    height:30px;
    text-align:center;
    line-height:300%;
    border:1px inset #777;
    background-color:#edeceb;
    z-index:1;
    }
    #divList {
    position:absolute;
    display:none;
    left:200px;
    top:110px;
    width:300px;
    height:200px;
    text-align:center;
    border:1px outset #fff;
    background-color:#c0c8f7;
    z-index:2;
    }
    #divList p {
    margin-top:50px;
    }
    </style>
    <script type="text/javascript">
    <!--
    var currentMoveObj;
    function closeDiv(id){
    document.getElementById(id).style.display="none";
    }
    function showDiv(id){
    document.getElementById(id).style.display="inline";
    }window.onload = function(){
                document.onclick = function(e){
                    e = e || window.event;
                    var dom =  e.srcElement|| e.target;
                    if(dom.id != "divSelect" && dom.id != "divList" && document.getElementById("divList").style.display == "inline") {
                        document.getElementById("divList").style.display = "none";
                    }
                };
            };
    -->
    </script>
    </head><body>
    <div id="divSelect" onclick="showDiv('divList')">点击显示</div>
    <div id="divList" onclick="closeDiv('divList')"><p>点击层外的任何地方关闭层</p><p>是层外的click事件不是层的onmouseout事件</p></div>
    </body>
    </html>
      

  4.   


    //试试
    document.body.onclick=function(e)
           {
              var e=window.event||e;
              try
              {
                if(e.srcElement.id!="divList")
                {
                    closeDiv('divList');
                }
              }
              catch(e)
              {}
           }
      

  5.   

    上面我发的那个兼容性不好，lz可以考虑jQuery
    $('body').click(function(e){
       if(e.currentTarget.id!="divList")
       {
          closeDiv('divList');
       }
    })
      

  6.   


    <!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">
    <head>
        <title></title>    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>    <script type="text/javascript">
            $(function($) {            $(document).click(function() {
                    $("#self").remove();            });            $("#self").click(function() {
                    return false;            });
            });
        </script></head>
    <body>
        <div id="self" style="height: 200px; width: 200px; background: red; z-index: 200;">
        </div>
        <span>dfsdfdsfssssssssssssssssss</span>
    </body>
    </html>找个jquery的框架  引用
      

  7.   

    试试这个呢：
    <button onclick="with(document.getElementById('d1')){style.display='';focus();}">Show</button><div id="d1" tabindex="0" onblur="this.style.display='none'" style="display:none">
    ASDFASFD <b>ASDFASDF</b> ASFDASF
    </div>
      

  8.   


    非常感谢谢，效果相当好，而且代码简单。以前写代码的时候div敲不出onblur来，一直以为是表单的事件，所以明知道有这个事件也没有去尝试。有的还说IE6不支持什么的。原来是可以用的，害我费这么大劲