CODEWITHSUNDEEP
jqueryjquery-events
arcyqwerty
arcyqwerty

Reputation: 10695

jQuery mousemove offset relative to listening element on bubbled event

If I have jQuery listen for the mousemove event on an "outer" element, the offsetX and offsetY values give an offset relative to an "inner" element when the mouse is within that inner element and the event bubbles to the handler.

How can I always get the offset relative to the element to which the handler is attached?

Example: http://jsfiddle.net/00mo3eeu/

HTML

<div class="outer">
    <div class="inner"></div>
</div>

CSS

.outer {
    background: red;
    width: 300px;
    height: 400px;
    margin: 40px;
}

.inner {
    background: blue;
    width: 100px;
    height: 150px;
    margin: 70px;
    display: inline-block;
}

JS

$('.outer').mousemove(function(e) {
    console.log([e.offsetY, e.offsetX]);
});

Update: in case it's not clear, get the dot to follow the pointer even in the blue box http://jsfiddle.net/00mo3eeu/1/

Upvotes: 6

Views: 2850

Answers (1)

arcyqwerty
arcyqwerty

Reputation: 10695

This is my current solution and I welcome any suggestions to improve it.

function (e) {
  var y = e.pageY - $(e.currentTarget).offset().top
  var x = e.pageX - $(e.currentTarget).offset().left
  ...
}

Ideally this would be given as one of the properties on the event object, but I can't find one that matches.

Upvotes: 13

Related Questions