Nhận vị trí chuột trong div có thể cuộn

Question

Một câu hỏi khác đã lấn át tôi trong vài ngày qua. Như bạn có thể đã thấy từ các câu hỏi khác của tôi, tôi đang tạo ra một số phần mềm bản đồ tư duy. Vì vậy, (cực kỳ đơn giản) tôi có hai div. Một là một hình vuông trên trang và một hình vuông khác nằm trong div đó lớn hơn khoảng 10 lần và có thể kéo được. Điều này là để các đối tượng có thể được đặt trên màn hình và sau đó di chuyển nhẹ sang một bên trong khi một đối tượng khác được thêm vào. Tôi làm điều này bằng cách tạo ra div cuộn ngoài.

Các vấn đề mà tôi đang gặp phải là phải thực hiện với vị trí chuột trong tập lệnh java. Nếu tôi nhận được vị trí chuột ở bất kỳ vị trí nào trong div thì sẽ không chính xác khi tôi bù đắp div bên trong bằng một nửa kích thước của nó ở trên cùng và bên trái (vì vậy người dùng đang nhìn vào giữa khung hình và có thể theo bất kỳ cách nào họ thích) . Tôi đã thử hàng chục chức năng phối hợp chuột khác nhau nhưng không có chức năng nào trong số này hoạt động. Ví dụ được cho là trình duyệt chéo mà tôi tìm thấy ở đâu đó trên web là:

function getMouse(e) { 
    var posx; 
    var posy; 
    if (!e) var e = window.event; 
    if (e.pageX || e.pageY) { 
    posx = e.pageX; 
    posy = e.pageY; 
    } 
    else if (e.clientX || e.clientY) { 
    posx = e.clientX + document.body.scrollLeft + document.getElementById("canvas").scrollLeft; 
    posy = e.clientY + document.body.scrollTop + document.getElementById("canvas").scrollTop; 
    } 
} //getMouse 

Nhưng ngay cả điều này cũng không hiệu quả. Tôi gần như chắc chắn rằng lỗi là bởi vì tôi có div bên trong là có thể kéo được. Hy vọng rằng tôi đã cố gắng giải thích, nhưng nếu tôi không có here is a very simple jsfiddle trong một nỗ lực để chứng minh tình hình mà tôi có (mặc dù không có nhấp chuột nào được thực hiện ở đây, hoàn toàn để chứng minh cấu trúc div của tôi). Trong sản phẩm tôi đang làm cho người dùng sẽ nhấp đúp chuột vào khung vẽ và một đối tượng mới sẽ xuất hiện, và do đó tại sao các tọa độ chuột cần phải chính xác.

Tôi hy vọng một người nào đó có thể giúp tôi.

Xin cảm ơn trước.

EDIT: Không đề cập đến một phần ứng dụng của tôi, tôi sử dụng JQuery để giải pháp có hoặc không có JQuery sẽ ổn. Cảm ơn một lần nữa.

Answer 1

Tôi hy vọng tôi đã hiểu chính xác vấn đề của bạn.

Bạn có thể sử dụng .offset() để xác định độ lệch hiện tại của bất kỳ phần tử nào có liên quan đến tài liệu gốc. Sự bù đắp này có thể được so sánh với vị trí chuột.

Bạn có thể sử dụng event.pageX và event.pageY để xác định vị trí chuột hiện tại.

Bạn có thể sử dụng $ {document} .scrollLeft() và $ {document}. scrollTop() để xác định vị trí cuộn hiện tại.

Vị trí chuột tương đối so với div bên trong sau đó có thể thu được với

$("#outer_canvas").mousemove(function(e) { 
    var relativePosition = { 
     left: e.pageX - $(document).scrollLeft() - $('#canvas').offset().left, 
     top : e.pageY - $(document).scrollTop() - $('#canvas').offset().top 
    }; 
    $('#mousepos').html('<p>x: ' + relativePosition.left + ' y: ' + relativePosition.top + ' </p>'); 
}); 

Answer 2

Tôi biết điều này là rất muộn, nhưng tôi chạy vào tình cảnh tương tự bản thân mình và đây là cách tôi giải quyết nó.

Tôi không muốn sử dụng jQuery nên tôi đã viết chức năng bù lại đệ quy này để xử lý vấn đề với việc di chuyển dời và vị trí của div chẳng hạn trong nhiều div cuộn.

function recursive_offset (aobj) { 
var currOffset = { 
    x: 0, 
    y: 0 
} 
var newOffset = { 
    x: 0, 
    y: 0 
}  

if (aobj !== null) { 

    if (aobj.scrollLeft) { 
    currOffset.x = aobj.scrollLeft; 
    } 

    if (aobj.scrollTop) { 
    currOffset.y = aobj.scrollTop; 
    } 

    if (aobj.offsetLeft) { 
    currOffset.x -= aobj.offsetLeft; 
    } 

    if (aobj.offsetTop) { 
    currOffset.y -= aobj.offsetTop; 
    } 

    if (aobj.parentNode !== undefined) { 
     newOffset = recursive_offset(aobj.parentNode); 
    } 

    currOffset.x = currOffset.x + newOffset.x; 
    currOffset.y = currOffset.y + newOffset.y; 
    console.log (aobj.id+' x'+currOffset.x+' y'+currOffset.y); 
} 
return currOffset; 
} 

Sử dụng nó cho thực:

var offsetpos = recursive_offset (this); //or some other element 

    posX = event.clientX+offsetpos.x; 
    posY = event.clientY+offsetpos.y;