怎么点击div以外空白的地方 使div隐藏

document.onclick =function(e){
var target = e.target;
var tc = target.className;
if(tc.indexOf('div') ===-1){
var tree = document.getElementsByTagName('div');
for(var i=0;i<tree.length;i++){
tree[i].style.display='none';
}
}
}

解决方案 »

  1.   

    <script language="javascript">
    function displaymodifynone(){
    var obj1=document.getElementById('xianshi')
    obj1.style.display='none';
    }
    </script>
    <input class="btn" onclick="javascript:displaymodifynone()" type="button" value="点击"/>
    <div id="xianshi">ddd</div>
      

  2.   


    <!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=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("*").click(function (event) {
                if (!$(this).hasClass("div")){
                    $(".div").toggle();
                }
                event.stopPropagation(); //阻止事件冒泡    
            });
        });
    </script>
    <style type="text/css">
    *{
    margin:0;
    padding:0;
    }
    .div{
    width:200px;
    height:200px;
    position:absolute;
    top:50px;
    left:100px;
    background:#00BCF3;
    display:none;
    }
    </style>
    </head><body>
    <input class="btn" type="button" value="点击"/>
    <div class="div"></div>
    </body>
    </html>
      

  3.   

    $(document).ready(function () {
            $("*").click(function (event) {
                if (!$(this).hasClass("div")&&!$(this).hasClass("btn")){
                    $(".div").hide();
                }
                event.stopPropagation();   
            });
        });