JavaScript 鼠标在元素上的位置（代码不起作用）答案

【问题标题】：JavaScript Mouse position over an element (code not working)JavaScript 鼠标在元素上的位置（代码不起作用）
【发布时间】：2009-12-02 21:05:42
【问题描述】：

我想在元素内显示鼠标位置..代码如下：

鼠标事件示例函数 GetMousePositionInElement(ev, element) { var osx = element.offsetX; var osy = element.offsetY; var 底部 = osy + element.height(); var x = ev.pageX - osx; var y = 底部 - ev.pageY；返回 { x: x, y: y, y_fromTop: element.height() - y }; } 函数句柄事件（oEvent）{ var oTextbox = document.getElementById("txt1"); var elem = document.getElementById("div1"); var xp = GetMousePositionInElement(oEvent, elem).x; var yp = GetMousePositionInElement(oEvent, elem).y; oTextbox.value += "\n x = " + xp + "y= " + yp; }

使用鼠标单击并双击红色方块。

div style="width: 100px; height: 100px; background-color: red" onmouseover="handleEvent(事件)" id="div1"> /div

textarea id="txt1" rows="15" cols="50"> /textarea>

代码有问题。鼠标位置不显示在 texArea 内。我必须进行哪些更改才能使代码正常工作和工作？（当然不是所有的代码都显示出来了，我删除了一些索引节点，以向您展示一些未显示的代码部分，但代码语法是正确的，这不是问题）

谢谢。

【问题讨论】：

标签： mouse position

【解决方案1】：

var osy = element.offsetY;

没有像offsetY 这样的属性。你可能会想到offsetTop。但是请注意，offsetLeft/Top 值是相对于 offsetParent 而不是页面的。如果您想要页面相对坐标，则需要遍历 offsetParents，或者，由于您似乎包含 jQuery，请调用它的 offset 函数来执行此操作：

var offset= $(element).offset();
var osx= offset[0], osy= offset[1];

var 底部 = osy + element.height();

element 是一个 DOM HTMLDivElement 对象，而不是 jQuery 包装器对象，因此它没有 height() 方法。添加包装器：

var bottom= osy+$(element).height();

或使用等效的 DOM 方法：

var bottom= osy+element.offsetHeight;

var y = bottom - ev.pageY;

注意pageY 不是 DOM 事件标准的一部分，在 IE 中也不可用。您可以使用标准的clientY 属性并调整页面的scrollTop 来计算它。同样，当您使用自己的方法绑定事件处理程序时，jQuery 会为您执行此操作，将 Firefox pageY 扩展添加到所有浏览器：

$('#div1').mouseover(handleEvent);

而不是内联 onmouseover=... 事件处理程序属性。

【讨论】：