Bỏ qua các phần tử con trên mousemove

Question

Tôi cố gắng để có được vị trí chuột liên quan đến một yếu tố bằng cách sử dụng mousemove. Nó hoạt động tốt, nhưng khi con chuột di chuột qua một phần tử con, các tọa độ có liên quan đến đứa trẻ này. Tôi muốn vị trí chuột liên quan đến div cha mẹ, không phải là con. Ví dụ:

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

Bổ sung event.stopPropagation() khi trẻ không trả lại dữ liệu. Và tôi không chắc chắn cách hoạt động của event.currentTarget.

Tôi không thể sử dụng con trỏ chuột hoặc mọi con chuột khác chỉ kiểm soát, bởi vì tôi muốn điều này được liên lạc thân thiện (bằng cách thay thế mousemove bằng touchmove).

Bất kỳ ý tưởng nào?

Answer 1

Trong đoạn code trên của bạn cho mousemove, hãy thử sử dụng cho sau moveX và moveY:

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

Ngoài ra, bạn quên # trong $('scene').

Đây là bản cập nhật JSFiddle.

Answer 2

Sử dụng mousemove và tọa độ con trỏ để nhận vị trí chuột toàn cầu. Sau đó trừ đi phần bù đắp của phần tử con của bạn.

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

Toàn bộ tập lệnh của bạn có thể giống như ví dụ được thử nghiệm sau đây cho phép bạn di chuyển đến đối tượng trong cảnh.

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

}); 

Đây có phải là điều bạn muốn làm không? Dưới đây là fiddle của bạn: http://jsfiddle.net/Bp3wH/9/ (Nếu bạn muốn xem phiên bản này chỉ có những cải tiến quang http://jsfiddle.net/Bp3wH/11/)

Answer 3

Để tham khảo trong tương lai, bạn có thể chỉ cần tạo div tuyệt đối và đặt nó lên trên cùng, đặt chỉ mục z và sửa nó thành đầu và bên trái của cha mẹ chứa con, sau đó thay đổi mã của bạn để tạo sự kiện trình xử lý chạy trên bộ chọn cho lớp đầu vào ở trên cùng. Chia các giá trị chiều cao và chiều rộng của bạn thành X và Y trên con trỏ và nó nằm ở giữa.