js关闭层问题，求大神指教啊，急~~~

我页面上有一些隐藏层，点击某个按钮就弹出来，就是让它的display值从none变成block。比如表情，现在要求在点击除表情区域以外的网页位置，要使表情div关闭掉，这个js咋个处理啊

解决方案 »

  1.   


    <!doctype html>
    <html>
    <head>
    <meta charset="gb2312" />
    <title></title>
    <style>
    span {
    color:red;
    }
    #test {
    display:none;
    position:absolute;
    left:30px; top:30px;
    width:200px;
    border:1px solid red;
    background:#fff;

    outline:none; /* ff 去掉 test 聚焦后的 边框虚线 */
    }
    </style>
    </head>
    <body>
    <span id="span">打开层</span>
    <a href="javascript:;" id="a">打开层</a>
    <div>1-1111111111</div>
    <div>1-1111111111</div>
    <div>1-1111111111</div>
    <div>1-1111111111</div>
    <div>1-1111111111</div>
    <div id="test">
    浮层，点击这个浮层以外的区域，都可以隐藏这个浮层
    <div>
    <script>
    function $(o){return document.getElementById(o)}
    // ------------------- span --------------------
    // 方法一：
    $('span').onclick = function(){
    $('test').style.display = 'block';
    $('test').tabIndex = -1; // 这里设置为-1，就不用在#test dom 中写 hidefocus="hidefocus"
    $('test').focus();
    }
    $('test').onblur = function(){
    $('test').style.display = 'none';
    }
    // 方法二：
    /*
    $('span').onclick = function(e){
    $('test').style.display = 'block';
    e = e || window.event;
    if (e.stopPropagation) {
    e.stopPropagation();
    } else {
    e.cancelBubble = true;
    }
    // 阻止事件冒泡
    }
    document.documentElement.onclick = function(){
    $('test').style.display = 'none';
    }
    */

    </script>
    </body>
    </html>
    这里例了两个方法，还可以用事件委托
      

  2.   

    这位大神，多谢你的指教，不过用的你方式写出来，如果给隐藏层里面的内容加上超链接，在点击隐藏层里面超链接的内容时，就会触发blur时间，使隐藏层关闭，应该点击里面的超链接也不会触发blur事件才对。还有你的第二个方法我也试了，在点击隐藏层任何地方都会导致隐藏层关闭，不知道是哪儿出问题了
      

  3.   


    <!doctype html>
    <html>
        <head>
            <meta charset="gb2312" />
            <title></title>
            <style>
                span {
                    color:red;
                }
                #test {
                    display:none;
                    position:absolute;
                    left:30px; top:30px;
                    width:200px;
                    border:1px solid red;
                    background:#fff;
                }
            </style>
        </head>
        <body>
            <span id="span">打开层</span>
            <div>1-1111111111</div>
            <div>1-1111111111</div>
            <div>1-1111111111</div>
            <div>1-1111111111</div>
            <div>1-1111111111</div>
            <div id="test">
    <a href="#">123</a>
                浮层，点击这个浮层以外的区域，都可以隐藏这个浮层
            <div>
            <script>
                function $(o){return document.getElementById(o)}
                $('span').onclick = function(e){
                    $('test').style.display = 'block';
    e = e || window.event;
                    if (e.stopPropagation) {
                        e.stopPropagation();
                    } else {
                        e.cancelBubble = true;
                    }            }
    var odiv = $('test');
                document.onclick = function(e){
    e = e || window.event;
    var s = e.target || e.srcElement;
    if( e.srcElement ){ //ie
    if( !(s == odiv || odiv.contains(s)) ){
    odiv.style.display = 'none';
    }
    }else{
    var res = odiv.compareDocumentPosition(s); 
    if( !(s == odiv || res == 20 || res == 0) ){
    odiv.style.display = 'none';
    }
    }
                    
                }            
                
                
            </script>        
        </body>
    </html>再试试，应该ok了