MouseEvent clientX Property

DOM Events MouseEvent

Definition and Usage

When a mouse event is triggered, the clientX property returns the horizontal coordinate of the mouse pointer (based on the client area).

The client area is the current window.

Tip:To get the vertical coordinate of the mouse pointer (based on the client area), use clientY Property.

Note:This property is read-only.

Example

Example 1

Output the mouse pointer's coordinates when the mouse button is clicked on the 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;

Try It Yourself

Example 2

Output the mouse pointer's coordinates when the mouse pointer moves over the 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 3

Demonstrate the difference between clientX and clientY as well as 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

Syntax

event.clientX

Technical Details

Return Value: A numeric value representing the horizontal coordinate of the mouse pointer, in pixels.
DOM Version: DOM Level 2 Events

Browser Support

Properties Chrome IE Firefox Safari Opera
clientX Support Support Support Support Support

Related Pages

HTML DOM Reference Manual:clientY Property of MouseEvent

HTML DOM Reference Manual:screenX Property of MouseEvent

HTML DOM Reference Manual:screenY Property of MouseEvent

HTML DOM Reference Manual:offsetX Property of MouseEvent

HTML DOM Reference Manual:offsetY Property of MouseEvent

DOM Events MouseEvent