MouseEvent clientX Property - Javascript DOM

Javascript examples for DOM:Mouse Event

  1. HOME
  2. Javascript
  3. DOM
  4. Mouse Event

Description

The clientX property returns the x coordinate of the mouse pointer.

This property is read-only.

Return Value

A Number, representing the horizontal coordinate of the mouse pointer, in pixels

The following code shows how to print the coordinates of the mouse pointer.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
div {// w w w. j  a  v a 2 s  .c  o m
    width: 200px;
    height: 100px;
    border: 1px solid black;
}
</style>
</head>
<body>

<div onmousemove="showCoords(event)" onmouseout="clearCoor()">move your mouse here</div>

<p id="demo"></p>

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

function clearCoor() {
    document.getElementById("demo").innerHTML = "";
}
</script>

</body>
</html>

Related Tutorials