JavaScript 鼠标位置位于元素上（代码不起作用）

Question

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

Mouse Events Example


 function GetMousePositionInElement(ev, element)
           {
               var osx = element.offsetX;
               var osy = element.offsetY;

               var bottom = osy + element.height();

               var x = ev.pageX - osx;
               var y = bottom - ev.pageY;

               return { x: x, y: y, y_fromTop: element.height() - y };
           }
    function handleEvent(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(event)"
     id="div1"> /div
 textarea id="txt1" rows="15" cols="50"> /文本区域>

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

谢谢。

Answer 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 = 底部 - ev.pageY;

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

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

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