I have a div somewhere on the page. I then get the mouse XY:

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

Where the current mousex/y are obtained via:

// 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;
    }
}

This worked fine in testing, but when the div is located down a page, it messes up themouse X/Y, as the co-ordinates only seem to be in the viewinwg area and not the entire page.

X co-ord works fine, because the pages never expand horizontally wider than the browser size, but vertical is a problem!

Any ideas how to get mouse X/Y relative to the element?

I have a div somewhere on the page. I then get the mouse XY:

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

Where the current mousex/y are obtained via:

// 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;
    }
}

This worked fine in testing, but when the div is located down a page, it messes up themouse X/Y, as the co-ordinates only seem to be in the viewinwg area and not the entire page.

X co-ord works fine, because the pages never expand horizontally wider than the browser size, but vertical is a problem!

Any ideas how to get mouse X/Y relative to the element?

• javascript
• mouse
• coordinates

• probably you'll just need to know the position of the element and math those differences. – yoda Commented Dec 21, 2010 at 15:21

2 Answers 2

event.clientX+document.body.scrollLeft and event.clientX+document.body.scrollTop or event.pageX and event.pageY

The first one is just adding current scroll position to the value, the second one is the mouse position relative to the page, not the client window.

You need to account for the parent elements to find a child element's true position on the page. See http://www.quirksmode/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 };
    }
}