怎么判断是否点击了某区域的外部？

比如有一个区块， 当点击了这个区块的外部时，让这个区块消失。 问题是怎么判断是否点击了某区域的外部？

解决方案 »

  1.   

    $("outArea:not('thisArea')").click(function(){ 
    $("thisArea").hide();
    })
      

  2.   

    加个监听事件
    算一下你当前DIV的位置 
    如果left,top超过DIV的宽和高就隐藏。
      

  3.   

    <!DOCTYPE HTML>
    <html>
     <head>
      <title> New Document </title>
      <meta charset="gb2312">
      <script src="http://code.jquery.com/jquery-1.6.1.js"></script>
      <style>
      /*如果网页内容大于一屏可以不写*/
    html,body{height:100%}
      </style>
     </head>
     <body>
      <div style="width:300px;height:400px;position:absolute;top:50%;left:50%;margin-left:-150px;margin-top:-200px;background:#ccc;" id="ceshi"></div>
     </body>
     <script>
    $('body').click(function(e){
    if( !$.contains($('#ceshi')[0],e.target) && $('#ceshi')[0] != e.target){
    $('#ceshi').hide();
    }
    });
     </script>
    </html>
      

  4.   

      
        document.body.onclick=function()
        {
          divShow.style.display = "none";
        };
    divShow.onclick=function(){
    if(e && e.stopPropagation){
          //W3C取消冒泡事件
          e.stopPropagation();
          }else{
          //IE取消冒泡事件
          window.event.cancelBubble = true;
          }
    }
      

  5.   

    <!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>
      <title></title>

    </head>
    <body>
    <div style='width:200px; height:200px; border:1px solid #000' id='div'>
    <p style='width:100px; height:100px; border:1px solid red'></p>
    </div><script type='text/javascript'>
    var div = document.getElementById('div');
    document.documentElement.onclick = function(e)
    {
        var t ;
        e = e || window.event , t = e.srcElement || e.target;
    if(!div.contains(t)) div.style.display='none';
    }
    </script></body>
    </html>