Получение местоположения щелчка мыши, где элемент, по которому щелкнули, является контрольной точкой

Question

Я хотел бы получить координаты каждого щелчка мыши и иметь начало элемента в качестве контрольной точки (поэтому щелчок в первом верхнем левом пикселе будет 0,0).

Я знаю функциитакие как pageX / Y и clientX / Y, но они используют другую контрольную точку.

Answer 1

вы можете сделать это, применив этот маленький трюк: вы получаете координаты pageX и pageY, а затем подаете координаты смещения элемента (то есть, как далеко элемент находится от pageX / pageY), и вы можете выбрать любой элемент, который вы хотите использовать в качестве контрольной точки для этого примера, у нас есть <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;

}

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