Может понадобиться для задач отрисовки drag&drop, различных анимаций. Поддерживает мобильные и десктопные браузеры.
Первый параметр: event, т.е. пользовательское событие, которое вызвало выполнение кода.
Второй параметр - DOM-элемент - родитель, относительно которого нужно считать координаты.
function getPointerCoordinates(ev, element) {
let rect = element.getBoundingClientRect();
let x, y;
if (ev.type.substring(0, 5) === 'touch') {
x = ev.touches[0].clientX;
y = ev.touches[0].clientY;
} else {
x = ev.clientX;
y = ev.clientY;
}
return {
x: Math.round(x - rect.left),
y: Math.round(y - rect.top),
}
}
Пример использования:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body style="height: 1000px">
</body>
<script>
function getPointerCoordinates(ev, element) {
let rect = element.getBoundingClientRect();
let x, y;
if (ev.type.substring(0, 5) === 'touch') {
x = ev.touches[0].clientX;
y = ev.touches[0].clientY;
} else {
x = ev.clientX;
y = ev.clientY;
}
return {
x: Math.round(x - rect.left),
y: Math.round(y - rect.top),
}
}
document.body.onclick = function(){
let coords = getPointerCoordinates(event, document.body)
alert(coords.x + ':' + coords.y);
}
</script>