获取鼠标位置所在的控件

假如现在一个父div中有2个div, 
其中一个div1在另一个div2之上(z轴)，
请问在鼠标点击div1时，如何获取div2，也就是说如何找到div1之下的控件？
请指教，谢谢。

解决方案 »

  1.   

    遍历吧，或者保存每个div的范围，根据坐标去匹配。
      

  2.   

    遍历不到啊
    用var element = document.elementFromPoint(oX, oY);
    在循环中用
    element = element.parentNode；
    这样这能遍历到父div，
    遍历不到div2
      

  3.   

    一恨心就做了个，LZ请笑纳
    <!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>test</title>
    <style type="text/css">
    body,html{ margin:0; padding:0;}
    .parent{ width:400px; height:300px; border:1px solid #999999; position:relative; top:100px; left:100px;}
    .c1{ position:absolute; z-index:2; width:100px; height:60px; top:10px; left:10px; background:#CCCCCC;}
    .c2{position:absolute; z-index:1; width:100px; height:60px; top:10px; left:10px;}
    .c3{position:absolute; z-index:2; width:100px; height:60px; top:100px; left:100px;background:#CCCCCC;}
    .c4{position:absolute; z-index:1; width:100px; height:60px; top:120px; left:120px;background:#EEEEEE;}
    </style>
    </head><body>
    <div class="parent" id="parent">
    <div class="c1" onclick="get(this)">111111111</div>
    <div class="c2">222222222</div>
    <div class="c3" onclick="get(this)">3333333</div>
    <div class="c4">444444444</div>
    </div>
    <script type="text/javascript">
    function get(p){
    var div=document.getElementById("parent").getElementsByTagName("div");
    var p_t=getTop(p);
    var p_l=getLeft(p);
    var p_w=p.offsetWidth;
    var p_h=p.offsetHeight;
    var t_o=p_t+p_h;
    var l_o=p_l+p_w;
    for(i=0;i<div.length;i++){
    if(getTop(div[i])>=p_t && getTop(div[i])<=t_o && getLeft(div[i])>=p_l && getLeft(div[i])<=l_o){
    alert(div[i].innerHTML)
    }
    }
    }
    function getTop(e){//获取元素纵坐标   
    var offset=e.offsetTop;   
    if(e.offsetParent!=null) offset+=getTop(e.offsetParent);   
    return offset;   
    }   
    function getLeft(e){//获取元素横坐标   
    var offset=e.offsetLeft;   
    if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);   
    return offset;   
    }
    </script> 
    </body>
    </html>
      

  4.   


    <!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">
    function fun(){
    var p = document.getElementById('d1').nextSibling;   --当前的下一个兄弟节点
    alert(p.innerHTML);
    }
    </script>
    </HEAD><BODY>
    <div id="d" style="width:300;height:200;border:1px solid black">
    <div id="d1" style="width:100;height:100;position: absolute;z-index:10;background:'yellow'" onclick="fun()">aaaaaa</div>
    <div id="d2" style="width:150;height:120;position: absolute;z-index:1;background:'green'">bbbbbbb</div>
    </div>
    </BODY>
    </HTML>