Ignoring child elements on mousemove

Question

I try to get mouse position relative to an element using mousemove. It works fine, but when the mouse hover a child element, the coordinates are relative to this 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() on child return no data. And I'm not sure how event.currentTarget works.

I can't use mouseenter or every other mouse only controls, because I want this to be touch friendly (by replacing mousemove by touchmove).

Any ideas?

Answer 1

In your 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 an updated JSFiddle.

Answer 2

Use mousemove and the cursor coordinates to get the global mouse position. Then substract the offset of your child element 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 could look like the following tested example which lets you move to 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's 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 this what you wanted to do? Here is your fiddle: http://jsfiddle.net/Bp3wH/9/ (If you like see this version with only optical improvements http://jsfiddle.net/Bp3wH/11/)

Answer 3

For future reference, you can simply create an absolute div and place it over the top, set the z-index and fix it to the top and left of the parent containing the child, then change your code to make the event handler run on selector for the input layer on top. Split your height and width values to X and Y on the cursor and it's in the center.