Описание тега mouse-coordinates

Описание тега Вопросы с тегом

Координаты мыши определяют положение курсора мыши на блоке отображения и могут быть получены с помощью интерфейса MouseEvent.

Для браузеров, использующих JavaScript, есть три системы координат:

Экран: координаты указателя мыши в глобальной области видимости.
Клиент: координаты указателя мыши в локальной области содержимого DOM.
Смещение: координаты указателя мыши относительно положения края заполнения целевого узла.

Следующий код демонстрирует различия между ними:

<!DOCTYPE html>
<html>
<body onmousemove='showCoordinates(event);'>
<canvas width='200' height='200' style='border: 3px black solid'></canvas>
<br>Screen: <span id='scr'></span>
<br>Client: <span id='client'></span>
<br>Offset: <span id='offset'></span>
</body>
<script>
function showCoordinates(evt) {
scr.textContent=evt.screenX+', '+evt.screenY;
client.textContent=evt.clientX+', '+evt.clientY;
offset.textContent=evt.offsetX+', '+evt.offsetY;
}
</script>
</html>