X
HOME HTML CSS JAVASCRIPT SQL PHP JQUERY ANGULAR BOOTSTRAP XML ASP.NET MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

MouseEvent clientY Property

Event Object Reference Event Object

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;
document.getElementById("demo").innerHTML = coor;

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 clientY property returns the vertical 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 horizontal coordinate (according to the client area) of the mouse pointer, use the clientX property.

Note: This property is read-only.


Browser Support

Property
clientY Yes Yes Yes Yes Yes


Syntax

event.clientY

Technical Details

Return Value: A Number, representing the vertical coordinate of the mouse pointer, in pixels
DOM Version: DOM Level 2 Events


Examples

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 clientX Property

HTML DOM reference: MouseEvent screenX Property

HTML DOM reference: MouseEvent screenY Property


Event Object Reference Event Object

Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB HOSTING

UK Reseller Hosting

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates

SHARE THIS PAGE

facebook