关闭层的问题

问个问题，当我鼠标点击一个层的外面时 关闭该层
这个功能是怎么实现的

解决方案 »

  1.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
     <head>
      <title> New Document </title>
      <meta name="Generator" content="EditPlus">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <script language="JavaScript">
      <!--
    document.onmousedown=function()
    {
    alert(event.srcElement.innerHTML);
    }
      //-->
      </script>
     </head> <body>
      <div>fdkjsafd</div>
     </body>
    </html>
      

  2.   

    obj = event.srcElement;
    if (obj != null && obj.id != 'a')
    {
    document.getElementById('a').style.display='none';
    }
      

  3.   

    document.onmousedown=function()
    {
    obj = event.srcElement;
    if (obj == null || obj.id=='a')
    {
    return;
    }
    while (obj=obj.parentNode)
    {
    if (obj.id == 'a')
    {
    return;
    }
    }
    document.getElementById('a').style.display='none';
    }
      

  4.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE>Popup-Window</TITLE>
    <style> 
    #alert {font-size:12px;border:1px solid #369;width:200px;height:50px;background:#e2ecf5;z-index:1000;position:absolute;}  
    </style> 
    <script>
    function hid()
    {
      var myAlert = document.getElementById("alert"); 
       myAlert.style.display = "none"; 
    }
    function onsub(name)
    {
         //  mClose.onclick();
       hid(); 
       document.getElementById("new_one").value=name.innerText;
    }
    function new_hid()
    {
    hid(); 
    }
    </script>
    </HEAD>
    <BODY>
     
     <Br><Br><Br>
     <span id="content"><input type="text" value="" class="tx4" id="new_one"></span><div id="alert" style="display:none;"> 
    <p><a href="javascript:void(0);" onclick="onsub(this);">test1</a></p> 
    <p><a href="javascript:void(0);" onclick="onsub(this);">test2</a></p> 
    <p><a href="javascript:void(0);" onclick="onsub(this);">test3</a></p> 
    <p><a href="javascript:void(0);" onclick="onsub(this);">test4</a></p> 
    <p><center><span id="close" style="cursor:hand;">close</span></center></p>
    </div>
    <div style="width:100%;height:100%;background:red;" onclick="new_hid();"></div>
    <script type="text/javascript"> 
    var myAlert = document.getElementById("alert"); 
    var reg = document.getElementById("new_one"); 
    var mClose = document.getElementById("close"); 
    reg.onclick = function() 
    { 
    myAlert.style.display = "block"; 
    //myAlert.style.position = "absolute"; 
    //myAlert.style.width="200px";
    //myAlert.style.height="200px";
    // var a = window.event.x; 
    // var b = window.event.y; 
    // alert(a+ " "+b);
     myAlert.style.top=event.clientY;   
      myAlert.style.left=event.clientX;  
    } 
    mClose.onclick = function() 
    { 
    myAlert.style.display = "none"; 
    } 
    </script> 
    </BODY>
    </HTML>