Ignorieren untergeordnete Elemente auf Maus

Question

Ich versuche, Mausposition relativ zu einem Element mithilfe von Mousemove zu erhalten. Es funktioniert gut, aber wenn die Maus ein untergeordnetes Element schwebt, sind die Koordinaten relativ zu diesem Kind. Ich möchte die Mausposition relativ zum übergeordneten div, nicht das Kind.

Siehe zum Beispiel this JSFiddle.

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

Hinzufügen event.stopPropagation() auf Kind zurück keine Daten. Und ich bin mir nicht sicher, wie event.currentTarget funktioniert.

Ich kann nicht mouseenter oder jede andere Maus nur steuern, weil ich will, dass diese berührungsfreundlich ist (indem man mousemove durch touchmove ersetzt).

Irgendwelche Ideen?

Answer 1

In Ihrem obigen Code für mousemove, versuchen Sie die folgende using für moveX und moveY:

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

Auch vergessen hat, # in $('scene').

Hier ist eine aktualisierte JSFiddle.

Answer 2

Verwenden Sie mousemove und die Cursor-Koordinaten, um die globale Mausposition zu erhalten. Dann subtrahieren Sie den Offset Ihres Kindelements von diesem.

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

Ihr ganzes Skript wie folgt getestet Beispiel aussehen könnte, die man in der Szene Objekt bewegen lässt.

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

}); 

Möchten Sie das tun? Hier ist Ihre Geige: http://jsfiddle.net/Bp3wH/9/ (Wenn Sie sehen, wie diese Version mit nur optischen Verbesserungen http://jsfiddle.net/Bp3wH/11/)

Answer 3

Als zukünftige Referenz können Sie einfach ein absolutes div erstellen und es oben platzieren, den z-index festlegen und oben und links vom übergeordneten Element mit dem untergeordneten Element fixieren und dann den Code ändern, um das Ereignis zu erstellen Handler läuft auf Selektor für die obere Eingabeschicht. Teilen Sie die Werte für Höhe und Breite in X und Y auf dem Cursor und in der Mitte.