1

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




鼠标事件示例


 函数 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 += "\nx = " + 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 内。我必须进行哪些更改才能使代码正常工作和工作？（当然不是所有的代码都显示出来了，我删除了一些 < 和 > inode 来向您展示一些未显示的代码部分，但代码语法是正确的，这不是问题）

谢谢你。

4

1 回答 1

1

var osy = element.offsetY;

没有这样的属性offsetY。你可能在想offsetTop。但是请注意offsetLeft/​<code>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；

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

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

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

于 2009-12-02T21:34:12.547 回答