Как получить кликабельную точку из HTML-элемента?

Question

как получить координаты x, y из элемента HTML относительно экрана?Я использую x, y из getBoundingClientRect(), как показано ниже, но, как вы можете видеть на изображении удара, если я использую переместить курсор в эту позицию x, y, курсор находится посередине между кнопками 0 и +, а не5 кнопка, которая является целевой кнопкой.Чего мне не хватает?

Код JS:

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.

Изображение:

ПРИМЕЧАНИЕ: если этоДополнительная информация может помочь, это приложение C # со встроенным браузером.

Answer 1

Вы можете попытаться добавить прослушиватель событий для вашего элемента и использовать событие для получения координат мыши.

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);
};

Answer 2

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")
}

Вы захотите назначить эту функцию событию onmousemove для внешнего элемента div, содержащего пользовательский интерфейс для вашего калькулятора.Это должно как минимум показать разницу между экраном X, Y и клиентом X, Y

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