Ignoring child elements on mousemove

Question

I am trying to get the mouse position relative to an element using mousemove. It works fine, but when the mouse moves over a child, the coordinates are relative to that child. I want the mouse position relative to the parent div, not the child.

See this JSFiddle , for example.

var object = document.getElementsByClassName('object'), scene = document.getElementById('scene'); function initMove() { for(var i=0; i<object.length; i++) { object[i].addEventListener("mousemove", function(event) { //event.stopPropagation(); return false; }, false); } scene.addEventListener("mousemove", function (event) { //event.stopPropagation(); //event.currentTarget; moveX = event.offsetX; moveY = event.offsetY; console.log(moveX + ' + ' + moveY); }, false); } function init() { initMove(); document.onselectstart = function(){ return false; } }; init();​ 

Adding event.stopPropagation() for the child does not return data. And I'm not sure how event.currentTarget works.

I cannot use mouseenter or any other mouse-only controls because I want it to be convenient for contact (by replacing mousemove with touchmove).

Any ideas?

Answer 1

In the above code for mousemove try using the following for moveX and moveY :

 moveX = event.clientX - scene.offsetLeft; moveY = event.clientY - scene.offsetTop; 

Also, you forgot # in $('scene') .

Here is the updated JSFiddle .

Answer 2

Use mousemove and cursor coordinates to get the global mouse position. Then align the offset of your child from this.

 var scene = $('#scene'); scene.mousemove(function(e){ var offsetX = e.pageX - scene.offset().left; var offsetY = e.pageY - scene.offset().top; }); 

Your whole script might look like the following example, which allows you to jump to an object in the scene.

 jQuery(document).ready(function(){ var scene = $('#scene'); var object = $('.object'); scene.mousemove(function(e){ // get offset of object relative to scene var offsetX = e.pageX - scene.offset().left; var offsetY = e.pageY - scene.offset().top; // grab object in it center (optional) offsetX -= object.width() / 2; offsetY -= object.height() / 2; // don't left to object out of the scene var maxX = scene.width() - object.width(); var maxY = scene.height() - object.height(); if(0 > offsetX) offsetX = 0; else if(offsetX > maxX) offsetX = maxX ; if(0 > offsetY) offsetY = 0; else if(offsetY > maxY) offsetY = maxY; // delete decimals offsetX = Math.floor(offsetX); offsetY = Math.floor(offsetY); // debug information object.html('X: ' + offsetX + '<br>Y: ' + offsetY); // move object object.css('left', offsetX).css('top', offsetY); }); }); 

Is that what you wanted to do? Here is your fiddle: http://jsfiddle.net/Bp3wH/9/ (If you like to see this version only with optical improvements http://jsfiddle.net/Bp3wH/11/ )

Answer 3

For future reference, you can simply create an absolute div and put it on top, set the z-index and fix it in the top and left column of the parent containing the child, and then change your code so that the event handler fires a selector for the top input layer. Divide your height and width values ​​by X and Y at the cursor and center.