JS：鼠标相对于元素的坐标答案

【问题标题】：JS: mouse coordinates relative to an elementJS：鼠标相对于元素的坐标
【发布时间】：2013-01-16 16:50:56
【问题描述】：

是否可以跨浏览器捕获鼠标相对于 div 框的坐标：

pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("thebox").offsetLeft;
pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("thebox").offsetTop;

【问题讨论】：

标签： javascript cross-browser

【解决方案1】：

这对我有用；更改您的框架：

function assignPosition(element,event) {
cX=event.clientX; cY=event.clientY;
if ($$(element).pageYOffset)
   {
   rX=$$(element).pageXOffset;
   rY=$$(element).pageYOffset;
   }
if (document.body)
   {
   rX=document.body.scrollLeft;
   rY=document.body.scrollTop;
   }
if (document.documentElement && document.documentElement.scrollTop)
   {
   rX=document.documentElement.scrollLeft;
   rY=document.documentElement.scrollTop;
   }
cX+=rX;
cY+=rY;
$$(element).style.left=cX+"px";
$$(element).style.top=cY+"px";
}

【讨论】：

@dusoft：好东西+1。顺便说一句，你用它测试过哪个浏览器？
在 Firefox、I Explorer 6、7 中测试

【解决方案2】：

如果您没有要测试的所有/大部分浏览器类型/版本，您可以看看这个：
W3C DOM Compatibility - Events
从上面链接：W3C DOM Compatibility - CSS Object Model View

让您了解代码的兼容性。

【讨论】：

【解决方案3】：

function dodoubleclick(e){
             var mouseX, mouseY;

                if(e.offsetX) {
                    mouseX = e.offsetX;
                    mouseY = e.offsetY;
                }
                else if(e.layerX) {
                    mouseX = e.layerX;
                    mouseY = e.layerY;
                }
alert("mousex:"+mouseX+"and"+"mousey:"+mouseY);

}

这个 sn-p 会给你鼠标坐标

【讨论】：