MouseEvent clientX Property
Example
Output the coordinates of the mouse pointer when the mouse button is clicked on an element:
var x = event.clientX; // Get the horizontal coordinate
var
y = event.clientY; // Get the vertical coordinate
var coor = "X coords: "
+ x + ", Y coords: " + y;
The result of coor could be:
X coords: 142, Y coords: 99
Try it yourself »
More "Try it Yourself" examples below.
Definition and Usage
The clientX property returns the horizontal coordinate (according to the client area) of the mouse pointer when a mouse event was triggered.
The client area is the current window.
Tip: To get the vertical coordinate (according to the client area) of the mouse pointer, use the clientY property.
Note: This property is read-only.
Browser Support
| Property | |||||
|---|---|---|---|---|---|
| clientX | Yes | Yes | Yes | Yes | Yes |
Syntax
event.clientX
Technical Details
| Return Value: | A Number, representing the horizontal coordinate of the mouse pointer, in pixels |
|---|---|
| DOM Version: | DOM Level 2 Events |
More Examples
Example
Output the coordinates of the mouse pointer while the mouse pointer moves over an element:
var x = event.clientX;
var y = event.clientY;
var coor = "X coords: "
+ x + ", Y coords: " + y;
document.getElementById("demo").innerHTML = coor;
Try it yourself »
Example
A demonstration of the differences between clientX and clientY and screenX and screenY:
var cX = event.clientX;
var sX = event.screenX;
var cY =
event.clientY;
var sY = event.screenY;
var coords1 = "client - X: " +
cX + ", Y coords: " + cY;
var coords2 = "screen - X: " + sX + ", Y
coords: " + sY;
Try it yourself »
Related Pages
HTML DOM reference: MouseEvent clientY Property
HTML DOM reference: MouseEvent screenX Property
HTML DOM reference: MouseEvent screenY Property
Event Object
