Java-Scripts.net

Mouse Event Handler

Monitor the mouse. This diagnostic script displays the current state of the mouse cursor, including its X/Y coordinates and which element it is hovering over.

Mouse Monitor Zone

X Position: 0

Y Position: 0

Status: Waiting...

Last Action: -

Copy the Script

<script>
function showCoords(event) {
    var x = event.clientX;
    var y = event.clientY;
    document.getElementById("demo").innerHTML = "X: " + x + ", Y: " + y;
}
</script>

<div onmousemove="showCoords(event)">
  Hover over me! <span id="demo"></span>
</div>

Frequently Asked Questions

`clientX` is the coordinate relative to the visible window (viewport), while `pageX` includes the scroll amount (relative to the whole document).

Yes. Recording these coordinates is the foundational logic behind creating user behavior heatmaps.

Partially. Mouse events often fire on tap, but for full mobile support, you should listen for `touchstart` and `touchmove` events as well.