Ignorar elementos secundarios en mousemove

Question

Intento obtener la posición del mouse relativa a un elemento utilizando mousemove. Funciona bien, pero cuando el mouse se desplaza sobre un elemento secundario, las coordenadas son relativas a este elemento secundario. Quiero la posición del mouse relativa al div principal, no al hijo.

Véase this JSFiddle por ejemplo.

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();​ 

Añadiendo event.stopPropagation() en niño return no hay datos. Y no estoy seguro de cómo funciona event.currentTarget.

No puedo usar el mouseenter o cualquier otro mouse, solo controles, porque quiero que sea táctil (reemplazando mousemove por touchmove).

¿Alguna idea?

Answer 1

En el código anterior para mousemove, intente utilizar el siguiente para moveX y moveY:

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

Además, se le olvidó # en $('scene').

Aquí hay una actualización JSFiddle.

Answer 2

Utilice mousemove y las coordenadas del cursor para obtener la posición global del mouse. Luego resta la compensación de tu elemento hijo de esto.

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

Toda su secuencia de comandos podría parecerse al siguiente ejemplo probado que le permite moverse al objeto en la escena.

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); 
    }); 

}); 

¿Esto es lo que quería hacer? Aquí está su violín: http://jsfiddle.net/Bp3wH/9/ (Si te gusta ver esta versión con sólo mejoras ópticas http://jsfiddle.net/Bp3wH/11/)

Answer 3

Para referencia futura, puede simplemente crear un div absoluto y colocarlo en la parte superior, establecer el índice z y fijarlo en la parte superior e izquierda del elemento primario que contiene al niño, luego cambie el código para que el evento controlador ejecute el selector para la capa de entrada en la parte superior. Dividir los valores de altura y ancho en X e Y en el cursor y está en el centro.