Example
Get coordinates of the mouse pointer, relative to the screen, when the mouse button is clicked on an element:
var x = event.screenX; // Get the horizontal coordinate
var
y = event.screenY; // 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 screenX property returns the horizontal coordinate (according to the users computer screen) of the mouse pointer when an event was triggered.
Tip: To get the vertical coordinate (according to the screen) of the mouse pointer, use the screenY property.
Note: This property is read-only.
Browser Support
| Property | |||||
|---|---|---|---|---|---|
| screenX | Yes | Yes | Yes | Yes | Yes |
Syntax
event.screenX
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
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 screenY Property
HTML DOM reference: MouseEvent clientX Property
HTML DOM reference: MouseEvent clientY Property
< Event Object