Jquery mousemove offset relative to listening element on bubbling event
If jQuery listens for an event mousemove
on an outer element, the values offsetX
and offsetY
give an offset from the "inner" element when the mouse is inside that inner element and the event for the handler.
How can I always get the offset relative to the element that the handler is attached to?
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 is not clear, get a point to follow the pointer even in the blue box http://jsfiddle.net/00mo3eeu/1/
source to share
This is my current solution and I welcome any suggestions for improving 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 of the event object, but I can't seem to find one that matches.
source to share