js中点击空白区域，隐藏层的问题,请大家支招。

单击层的时候，取消事件冒泡
document.onclick = function(){
    //隐藏层代码
};div.onclick = function(oEvent){
    //取消冒泡
    oEvent = oEvent || window.event;
    if(document.all){
        oEvent.cancelBubble = true;
    }else{
        oEvent.stopPropagation();
    }
};

解决方案 »

  1.   

     onmouseout="javascript:if(!this.contains(event.toElement)){hidePop('friendalert');}"将上一句放到你的div里面，将hidePop('friendalert')替换成隐藏层的代码即可。
      

  2.   

    <html lang="utf-8" xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title></title>
            <style>
            </style>
        </head>
        <script language="JavaScript">
            function $(id){
                return (document.getElementById(id));
            }
            
            function test(evt){
                if (!$('div1') || $('div1').style.display == 'none') {
                    return;
                }
                var e = window.event || e;
                var o = e.srcElement || e.target;
                while (o) {
                    if (o == $("div1")) {
                        return;
                    }
                    o = o.parentNode;
                } // alert("hi! you should close the div1!")  
                $('div1').style.display = 'none';
            }
            
            function showDiv(evt){
                var od = $('div1');
                var e = window.event || evt;
                var o = e.srcElement || e.target;
                with (od.style) {
                    display = 'block';
                    left = o.offsetLeft + 'px';
                    top = o.offsetTop + o.offsetHeight + 1 + 'px';
                }
            }
            
    function hideDiv(evt){
    $('div1').style.display = 'none';
    }
            window.onload = function(){
    //            document.onblur = document.onmousedown = document.onkeyup = test;
                $("text1").onfocus = showDiv;
                $("text2").onfocus = showDiv;            $("text1").onblur = hideDiv;
                $("text2").onblur = hideDiv;
            }
        </script>
        <body>
            <br>
            <input type="text" id="text1" value="">
            <br>
            <input type="text" id="text2" value="">
            <br>
            <div id="div1" align="center" style="background:blue;position:absolute;width:300px;height:200px;overflow:auto;display:none;">
                <br>
                <p>
                    测试一下
                    <br>
                </p>
            </div>
        </body>
    </html>