Javascript: Nhận vị trí chuột tương ứng với phần tử cha

Question

Có cách nào để có vị trí chuột tương ứng với phần tử gốc của nó không?

Hãy nói rằng tôi có một cấu trúc:

<div id="parent"> 
    <span class="dot"></span> 
</div> 

Khi tôi mang chuột của tôi trên span yếu tố tôi cần để có được vị trí tương đối của nó đến yếu tố mẹ của nó (<div id="parent">). PageX/ClientX cho tôi vị trí tương đối so với khu vực trang/khách hàng, vì vậy nó không hoạt động đối với tôi.

Answer 1

Trừ vị trí của phần tử gốc (offsetLeft; offsetTop) khỏi vị trí chuột (pageX; pageY) để nhận vị trí tương đối. Hãy nhớ lấy offsetParent nếu bạn có nhiều mức độ lệch.

Ví dụ:

element.addEventListener("mousedown", function (e) { 
    let x = e.pageX - parent.offsetLeft; 
    let y = e.pageY - parent.offsetTop; 

    console.log(x, y); 
}); 

đâu element là yếu tố bên trong của bạn nhận được sự kiện này, và parent là tài liệu tham khảo của bạn mong muốn cho các tọa độ.

Answer 2

Hãy thử thuộc tính offsetParent. http://help.dottoro.com/ljetdvkl.php

Hãy thử điều này: positionX = document.getElementByID ('childId'). OffsetParent.offsetLeft; positionY = document.getElementByID ('childId'). OffsetParent.offsetLeft;

Answer 3

jquery bù đắp() phương pháp xử lý vị trí cha mẹ, vì vậy

function onsomemouseevent(e) { 
    var x = e.pageX - $(e.target).offset().left; 
} 

là trình duyệt đơn giản trừu tượng jquery.