Получение относительного мышиного X / Y в JavaScript

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 координата работает нормально, потому что страницы никогда не расширяются по горизонтали шире, чемРазмер браузера, но по вертикали это проблема!

Есть идеи, как получить мышь 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 };
    }
}