请高手帮个忙，一个关于JS获取元素坐标的问题

先说下我的需求
我是想用js获取鼠标移动我定义的画板位置的坐标 该画板为一个div
首先我知道可以再 div中加一个ononmousemove 这个事件轻松获取其坐标，但是这个效率太低了执行的效果不连贯
所以我采用的是document的ononmousemove这个执行的效果更好一点也很连贯
但是我现在遇到的问题是我写的这个方法不支持ie 用ff没问题 我用ie的调试工具看了一下也感觉没问题 还请高手看下问题到底出在哪里 不剩感激！
function getElementX(e)
{
    var x =  e.offsetLeft;
    if(e.offsetParent != null) x += getElementX(e.offsetParent);
    return x;
}
function getElementY(e)
{
    var y = e.offsetTop;
    if(e.offsetParent != null) y += getElementY(e.offsetParent);
    return y;
}
function getElementPoint(e){
return {x:getElementX(e),y:getElementY(e)};
}
function mouseMove(e){
e = e || window.event;
var eX=e.pageX || e.offsetX;
var eY=e.pageY || e.offsetY;
document.getElementById('x').value = eX-getElementPoint(document.getElementById("canvas")).x;
document.getElementById('y').value = eY-getElementPoint(document.getElementById("canvas")).y;
}
document.onmousemove = mouseMove;
document.getElementById('cx').value = getElementPoint(document.getElementById("canvas")).x;
document.getElementById('cy').value = getElementPoint(document.getElementById("canvas")).y;

解决方案 »

  1.   

    值取的不对 乱掉 一个div中 移动 一个像素 有时候值差别会达到几千
      

  2.   

    function getElementX(e)
    {
      var x = e.offsetLeft; //IE的事件不支持这些属性 下边的也有 
      if(e.offsetParent != null) x += getElementX(e.offsetParent);
      return x;
    }
    function getElementY(e)
    {
      var y = e.offsetTop; 
      if(e.offsetParent != null) y += getElementY(e.offsetParent);
      return y;
    }
      

  3.   

    大哥 你说的offsetTop offsetParent offsetLeft这些我用ie断点调试了一下那些属性是有的 值是对的。
    我怀疑是在事件上可能有问题，但是我不知道应该怎么改
      

  4.   

    html代码<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>title</title>
            <script type="text/javascript" src="js/wz_jsgraphics.js">
            </script>
        </head>
        <body style="margin: 0px;padding: 0px;">
            <br/>
    CX:<input type="text" id="cx" name="cx">
    CY:<input type="text" id="cy" name="cy">
            <div id="canvas" style="margin: 0px;padding: 0px;position: relative; width: 100%; color: #444444;">
            </div>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <div></div>
    X:<input type="text" id="x" name="x">
    Y:<input type="text" id="y" name="y">
        </body>
        <script type="text/javascript" src="js/p.js">
        </script>
        <script type="text/javascript" src="js/g.js">
        </script>
    </html>
      

  5.   

    JS:
    var g = new jsGraphics("canvas");
    //绘制x,y矩形
    //g.setColor("#227700");
    g.setColor("#467846");
    g.drawRect( 0, 0, 300, 300 ); 
    g.fillRect(0, 0, 30, 300);
    g.fillRect(0, 270, 300, 30);
    g.setStroke(2)
    g.setColor("#FF0000");
    g.drawLine(31,0,31,267);
    g.drawLine(31,267,298,267);
    g.setColor("#808080");
    g.setStroke(1)
    /**
     * 由于是坐标点所以在绘制的时候要记录该线的坐标
     */
    for(var i=0;i<7;i++){
    g.drawLine(31+((300-31)/(6.5))/4+(300-31)/(6.5)*i,267,31+((300-31)/(6.5))/4+(300-31)/(6.5)*i,0);
    }
    g.setColor("#C0C0C0");
    for(var i=0;i<4;i++){
    g.drawLine(300-((300-31)/(6.5))*0.65-(300-31)/(6.5)*i,267,300-((300-31)/(6.5))*0.65-(300-31)/(6.5)*i,0);
    }
    g.setColor("#FFFFFF");
    g.setFont("arial","15px",Font.PLAIN);
    g.drawString( "125", 29, 271 );
    g.drawString( "-10", 0, 0 );
    //g.drawImage( "images/tl/banana.png", 20, 20, 250, 40); 
    g.paint();function getElementX(e)
    {
        var x =  e.offsetLeft;
        if(e.offsetParent != null) x += getElementX(e.offsetParent);
        return x;
    }
    function getElementY(e)
    {
        var y = e.offsetTop;
        if(e.offsetParent != null) y += getElementY(e.offsetParent);
        return y;
    }
    function getElementPoint(e){
    return {x:getElementX(e),y:getElementY(e)};
    }
    function mouseMove(e){
    e = e || window.event;
    var eX=e.pageX || e.offsetX;
    var eY=e.pageY || e.offsetY;
    document.getElementById('x').value = eX-getElementPoint(document.getElementById("canvas")).x;
    document.getElementById('y').value = eY-getElementPoint(document.getElementById("canvas")).y;
    }
    document.onmousemove = mouseMove;
    document.getElementById('cx').value = getElementPoint(document.getElementById("canvas")).x;
    document.getElementById('cy').value = getElementPoint(document.getElementById("canvas")).y;
      

  6.   

    看了一下，感觉这里貌似有点问题
    var eX=e.pageX || e.offsetX;
    var eY=e.pageY || e.offsetY;
    两个值，你在不同浏览器上试试，是否一致。
      

  7.   

    我觉得也是事件的原因，现在我换了用jquery来获取事件的处理，所有的浏览器都兼容了，不过占用的cpu就大了，还得再改进下
      

  8.   

    参考下
    var event = e || window.event;
    // 鼠标距离网页顶端距离
    var pageY = event.pageY || event.clientY + document.body.scrollTop;
    var pageX = event.pageX || event.clientX + document.body.scrollLeft;
    // 目标元素
    var target = event.target || event.srcElement;
    var $target = $(target);
    // 元素距离body顶部的值
    var top = $target.offset().top;
    var left = $target.offset().left;
    // 元素高度
    var offsetH = target.offsetHeight;
    // 元素宽度
    var offsetW = target.offsetWidth