页面上有很多嵌套的div,点击鼠标 怎么得到被点击的div的id

页面上有很多嵌套的div,我不知道他们的id,当点击鼠标的时候,得到被点击的div的id,如果该div没有id,那么取它外围最近的div的id
 怎么办呢?没有思路

解决方案 »

  1.   

    onclick = ad(this)把当前对象传进去即可！var ad = function(thisobj){
      alert(thisobj.id)}
      

  2.   

    S!var   ad   =   function(thisobj){ 
        if(thisobj.id == ""){
          alert(thisobj.parentNode.id)
        } 
    }
      

  3.   

    所有div是别人写的,我不能要求别人把div里面加方法onclick等方法
     比如<div id="1"><div id="2">test click</div></div>
     当我点击test click的时候,得到id位2的div,
      

  4.   


    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $("div").click(function(){
    alert($(this).parent().attr('id'));
    return false;
    });
    });
    </script>
    <div id="1">
    <div id="2">
    2
    </div>
    <div id="3">
    3
    <div id="4">
    4
    </div>
    </div>
    </div>
      

  5.   


    所有div是别人写的,我不能要求别人把div里面加方法onclick等方法 
      比如 <div   id="1"> <div   id="2"> test   click </div> </div> 
      当我点击test   click的时候,得到id位2的div,----那好办
    window.onload = function(){
    var oDiv = document.getElementsByTagName("div");
    for(var i=0;i<oDiv.length;i++){
    oDiv.setAttribute("onclick" ,function(){return ad(this)});
    }
    }
      

  6.   

    <html>
    <head>
    <meta http-equiv="http-content" content="text/html;charset=gb2312"/>
    <title>测试</title>
    <script>
    //使用event对象
    document.onclick=GetID;
    function GetID(e)
    {
      e=e?e:window.event;
      var tag=e.target?e.target:e.srcElement;
      if(tag.id)
       alert(tag.id);
      else
      {
        while(tag!=null)
        {
            if(tag.id)
            {
              alert(tag.id);
              break;
            }
            tag=tag.parentNode;
        }
      }
    }
    </script>
    </head>
    <body>
    <div id="21">21
    <div id="211">211</div>
    <div id="213">213</div>
    <div>212</div>
    </div>
    <div id="22">22</div>
    <div id="23">23</div>
    <div id="24">24</div>
    </body>
    </html>
      

  7.   

     以上方法是沒問題在部分瀏覽器是可行的，但有一下幾點注意
      1， 事實上還是要考慮下是否冒泡的 因為常用瀏覽器一般都采用冒泡 從類到外捕捉，但也有不少列外的
      2， 習慣上還是不要使用this對象，用event.target 或者event.srcElement.
      3, 避免零級dom的應用，建議使用attachEvent或者addEventListener
      
      

  8.   


    <!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=gb2312" />
    <title>elementFromPoint|explicitOriginalTarget</title>
    <script type="text/javascript">
    /*
    利用document.onmousemove方法检测鼠标移动
    然后IE和OP都有document.elementFromPoint方法可以求出某点的对象
    FF则可以用event.explicitOriginalTarget得出目前触发over的对象
    这样就得到了当前鼠标经过的对象
    */
    document.onclick = function (e) {
        var e = window.event || e;
        document.getElementById("status").innerHTML = (
            document.elementFromPoint ? document.elementFromPoint(
                e.clientX + document.documentElement.scrollLeft, e.clientY + document.documentElement.scrollTop
            ) : e.explicitOriginalTarget
        ).id;
    };
    </script>
    </head>
    <body>
    <div id="status" style="background-color:#6699CC; border:#000000 1px solid;"></div>
        <div id="f1" style="width:100px; height:200px; background-color:#000000;">
            <div id="f11" style="width:50px; height:100px; background-color:#CCCCCC;">&nbsp;</div>
        </div>
        <div id="f2" style="width:100px; height:50px; background-color:#FF0000;">&nbsp;</div>
    </body>
    </html>
      

  9.   

    - -，我倒，注释忘记改了，这个原先是鼠标移动的时候检测经过的对象不过把document.onmousemove改成document.onclick，就是检测鼠标按下时的对象了。。