mousemove grabbing the XY offset of nested elements

Question

I'm trying to get the XY position of the mouse in a parent element. That part is simple, what's throwing me off is when there's a nested element, it then grabs the XY position of the mouse in that nested element.

I created a JS Fiddle with a very simple example: http://jsfiddle.net/htenchwv/

You can see how I'm pulling the position with this

$(".parent").mousemove(function(event){
    $(".debug").html("X: "+ event.offsetX +"<br>Y: "+ event.offsetY);
});

You can see in either the X or Y position, the numbers jump down when you move into the child element. I'm at a loss for why or how I can prevent that behavior and gather ONLY the XY mouse in the parent element

"X: undefined, Y: undefined" Regards, [Firefox](http://stackoverflow.com/questions/11334452/event-offsetx-in-firefox) — RienNeVaPlu͢s, Feb 18 '15 at 19:56

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

2

You can use client X and Y, combined with .offset()

Updated demo

$(document).ready(function($){
    $(".parent").mousemove(function(event){
        var pOffset = $(".parent").offset(),
            px = event.clientX - pOffset.left,
            py = event.clientY - pOffset.top;
        $(".debug").html("X: "+ px +"<br>Y: "+ py);
    });
});

HTH

-Ted

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 18 '15 at 19:58

Ted

14,757
2
41
58

But that gives it relative to the page. Which maybe I'll just have to work around that. – John Sly Feb 18 '15 at 20:03
edited answer, and updated demo to reflect x/y on the element, accounting for its offset – Ted Feb 18 '15 at 20:10

mousemove grabbing the XY offset of nested elements

1 Answers1