Mouse coordinates give the position of the mouse cursor on the display unit, and can be retrieved using the MouseEvent interface.
For browsers using JavaScript, there are three coordinates systems:
- Screen: The coordinates of the mouse pointer in the global scope.
- Client: The coordinates of the mouse pointer in the local DOM content scope.
- Offset: The coordinates of the mouse pointer relative to the position of the padding edge of the target node.
The following code demonstrates the differences between the three:
<!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>
