获取鼠标单击的位置，单击的元素是参考点

Question

我想获取每次单击鼠标的坐标，并将元素的开头作为参考点（因此，单击左上第一个像素将为0,0）。

我知道诸如pageX / Y和clientX / Y之类的功能，但是它们使用不同的参考点。

Answer 1

您可以通过应用以下小技巧来做到这一点： 您可以获取pageX和pageY坐标，然后将元素偏移坐标（这是元素与pageX / pageY的距离）划分为子坐标，然后可以选择要用作此示例参考点的任何元素，我们有{{ 1}}

<div id="test"></div>

var testDiv = document.getElementById("test")
testDiv.addEventListener("click",function(e){
 var crd = {x :0,y:0};
 crd.x = e.pageX - testDiv.offsetLeft
 crd.y = e.pageY - testDiv.offsetTop
 console.log(crd)
})

* {
margin:0;
padding:0;
box-sizing : border-box;
}

#test{
margin: 60px;
width : 200px;
height : 200px;
border : 2px solid black;

}