How do get I the clickable point from a html element?

Question

how do I get the x,y coordinates from a HTML element relative to screen? I'm using x,y from getBoundingClientRect() as below, but as you can see in the blow image, if I use move the cursor to this x,y position, the curson is in the middle between 0 and + buttons not the 5 button, which is the target button. What am I missing?

JS code:

var e = document.querySelector('input[id=five]');"
var r = e.getBoundingClientRect();
var x = r.x;
var y = r.y;
MoveMouseTo(x,y); // imaginary call, the real cursor move is done by C# but I can share the code, as needed.

Image:

NOTE: if this aditional info may help, it's a C# application with embedded browser.

Answer 1

const getCoords = (e) => {
var x = e.clientX 
var y = e.clientY
var xx = e.screenX
var yy = e.screenY

console.log(x, y, "client")
console.log(xx, yy, "screen")
}

You're going to want to assign this function to a onmousemove event to the outermost div containing the UI for your calculator. This should at least show you the difference between a screen X,Y and a client X,Y

https://www.w3schools.com/code/tryit.asp?filename=FVXZOK1SPTR0

Answer 2

You can try to add an event listener on your element and use the event to retrieve the coordinates of the mouse.

const $element = document.querySelector('input[id=five]');
$element.addEventListener('mousemove', handleMouseMove);
function handleMouseMove (event) {
  console.log('Offset from the screen coordinates', event.screenX, event.screenY);
  // The client refers to the element you are bound to;
  console.log('Offset from the client coordinates', event.clientX, event.clientY);
};