Question

我在页面的某个地方有一个div。然后我得到鼠标XY：

        var relativeMouseX = self.gCurrentMouseX - self.gContainerLeft;
        var relativeMouseY = self.gCurrentMouseY - self.gContainerTop;

当前mousex / y通过以下方式获得：

// Update mouse coords
this.gUpdateMousePos = function(evt) {
    if (evt === undefined) evt = window.event;
    if (window.event) {
        this.gCurrentMouseX = event.clientX;
        this.gCurrentMouseY = event.clientY;
    }
    else {
        this.gCurrentMouseX = evt.clientX;
        this.gCurrentMouseY = evt.clientY;
    }
}

这在测试中运行良好，但是当div位于页面下方时，它会混淆X / Y，因为坐标似乎只在viewinwg区域而不是整个页面。

X co-ord工作正常，因为页面的水平范围从不会比浏览器大小更宽，但垂直是一个问题！

如何获得相对于元素的鼠标X / Y的任何想法？

Answer 1

event.clientX+document.body.scrollLeft和event.clientX+document.body.scrollTop 或 event.pageX和event.pageY

第一个是将当前滚动位置添加到值，第二个是相对于页面的鼠标位置，而不是客户端窗口。

Answer 2

您需要考虑父元素以查找子元素在页面上的真实位置。见http://www.quirksmode.org/js/findpos.html

 /**
 * Locate the real position of an element,
 * relative to its parent's offsets
 */
function findPos (obj) {
    var curleft = 0,
        curtop = 0;

    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);

        return { x: curleft, y: curtop };
    }
}

在javascript中获取相对鼠标X / Y.

2 个答案: