Get mouse coordinates for a specific element

Question

I created a graph where I move objects with the mouse. I wanted to get the real coordinates defined in the graph. I’m just getting the x and y positions of the window coordinates. In my axis I define the maximum and the minimum of x, and if the object is in the middle of the axis, for example, to obtain half of the maximum. The x-axis is 400px in size. How can I get real coordinates?

Answer 1

At the event mousemove of a given element, you get the cursor coordinates in relation to the window with the properties clientX and clientY of the event:

elemento.onmousemove = function(e) {
    // coordenadas em e.clientX e e.clientY
}

To calculate the coordinate relative to the element itself, or to some other element, you first need to figure out the position of the element in the window. This you get with the getBoundingClientRect() of the element:

var boxDoElemento = elemento.getBoundingClientRect();
alert(boxDoElemento.left); // posição x
alert(boxDoElemento.top);  // posição y

If there is no page rolling, simply subtract the element position from the mouse cursor position to get the relative position. If there is rolling, you need to discount it.

Putting everything together to get what you want, considering an element in an arbitrary screen position (the red border):

var elemento = document.querySelector('#meuElemento');
var boxDoElemento = elemento.getBoundingClientRect();

elemento.onmousemove = function(e) {
    var rolamentoX = document.body.scrollLeft;
    var rolamentoY = document.body.scrollTop;
    var posX = e.clientX - boxDoElemento.left + rolamentoX;
    var posY = e.clientY - boxDoElemento.top + rolamentoY;
    elemento.innerHTML = posX + ', ' + posY;
}

#meuElemento {
  width: 50%;
  height: 250px;
  margin-left: 25%;
  margin-top: 100px;
  border: 1px solid red;
}

<div id="meuElemento">passe o mouse aqui dentro</div>