点击页面空白处就关闭某个层

点击页面空白处就关闭某个层，如何用javascript实现

解决方案 »

  1.   

    就像jquery autocomplete一样，点空白地方，层自动隐藏
      

  2.   

    document.body.onclick=function(){
    //控制隐藏
    }
      

  3.   

    元素的click最后也要冒泡到body的click 
      

  4.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
        <title>MyHtml.html</title>
        <style type="text/css">
            #inner{height: 100px;background: #cfc;}
            #middler{background: #ccf;}
            #outer{background: #fcc;}
            div{border: 1px solid blue;padding: 20px;width: 200px;}
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>    
        <script type="text/javascript">
            $(function () {
                $("*").click(function (event) {
                    event.stopPropagation(); //阻止事件冒泡  
                });
                $("body").click(function () {
                    $("#inner").hide();
                });
            });  
        </script>
    </head>
    <body>
        <h1>点击空白处, 关闭/打开 "最里层" . 点击其它元素无效.</h1>
        <div id="outer">
            最外层
            <div id="middler">
                中间层
                <div id="inner">最里层</div>
            </div>
        </div>
    </body>
    </html>
      

  5.   

    上面的只能关闭， 下面的有开关的效果
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
        <title>MyHtml.html</title>
        <style type="text/css">
            #inner{height: 100px;background: #cfc;}
            #middler{background: #ccf;}
            #outer{background: #fcc;}
            div{border: 1px solid blue;padding: 20px;width: 200px;}
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>    
        <script type="text/javascript">
            $(function () {
                $("*").click(function (event) {
                    event.stopPropagation(); //阻止事件冒泡  
                });
                $("body").click(function () {
                    $("#inner").toggle(!$("#inner").is(":visible"));
                });
            });  
        </script>
    </head>
    <body>
        <h1>点击空白处, 关闭/打开 "最里层" . 点击其它元素无效.</h1>
        <div id="outer">
            最外层
            <div id="middler">
                中间层
                <div id="inner">最里层</div>
            </div>
        </div>
    </body>
    </html>
      

  6.   

    document.documentElement.onclick = function(e){
    var event = e ? e : window.event,
    target = event.target ? event.target : event.srcElement;
    alert(target === this);
    if(target === this){
    //控制隐藏
    }
    }记得先在页面最开头写上<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      

  7.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <title></title>
        <style type="text/css">
            #inner{height: 100px;background: #cfc;}
            #middler{background: #ccf;}
            #outer{background: #fcc;}
            div{border: 1px solid blue;padding: 20px;width: 200px;}
        </style>
    </head>
    <body>
        <h1>点击空白处, 关闭/打开 "最里层" . 点击其它元素无效.</h1>
        <div id="outer">
            最外层
            <div id="middler">
                中间层
                <div id="inner">最里层</div>
            </div>
        </div>
    </body>
    </html>
    <script type="text/javascript">
        var bodyObj = document.body ? document.body : document.documentElement;
        bodyObj.onclick = function (e) {
            var event = e ? e : window.event;
            var target = event.target ? event.target : event.srcElement;
            if(target===bodyObj)
                document.getElementById("inner").style.display = "none";
        }
    </script>
    按楼上的照猫画虎写了一个js版, 不过可以去掉(或者不去掉): 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">