Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to find the coordinates of the cursor with JavaScript?
In this tutorial, we will learn how to find the coordinates of the mouse cursor with JavaScript. We need to determine the X and Y coordinates (horizontal and vertical positions) of the cursor on the screen when mouse events occur.
JavaScript provides us with two essential properties to get the coordinates of the mouse cursor when events are triggered:
Using event.clientX Property
Using event.clientY Property
Using event.clientX Property
The event.clientX property returns the horizontal position (X-coordinate) of the cursor relative to the browser's viewport when an event is triggered. It returns a numeric value representing the pixel distance from the left edge of the viewport.
Syntax
function functionName(event) {
let x = event.clientX;
}
Example: Getting X-coordinate
Below example shows how to get the X-coordinate of the cursor:
<!DOCTYPE html>
<html onclick="display(event)">
<body>
<h3>Find the X-coordinate of the cursor</h3>
<p>Click anywhere on the screen to see X-coordinate of the cursor.</p>
<p id="result"></p>
<script>
function display(event) {
let x = event.clientX;
let result = document.getElementById("result");
result.innerHTML = "<b>X-coordinate: </b>" + x;
}
</script>
</body>
</html>
In this example, we capture the horizontal position of the cursor using the event.clientX property and display it when the user clicks anywhere on the page.
Using event.clientY Property
The event.clientY property returns the vertical position (Y-coordinate) of the cursor relative to the browser's viewport when an event is triggered. Similar to event.clientX, it returns a numeric value representing the pixel distance from the top edge of the viewport.
Syntax
function functionName(event) {
let y = event.clientY;
}
Example: Getting Y-coordinate
Below example shows how to get the Y-coordinate of the cursor:
<!DOCTYPE html>
<html onclick="display(event)">
<body>
<h3>Find the Y-coordinate of the cursor</h3>
<p>Click anywhere on the screen to see Y-coordinate of the cursor.</p>
<p id="result"></p>
<script>
function display(event) {
let y = event.clientY;
let result = document.getElementById("result");
result.innerHTML = "<b>Y-coordinate: </b>" + y;
}
</script>
</body>
</html>
Getting Both X and Y Coordinates
We can combine both properties to get the complete position of the cursor on a 2D plane. This is useful for applications that need to track mouse movement or implement drag-and-drop functionality.
Example: Complete Coordinates
<!DOCTYPE html>
<html onclick="display(event)">
<body>
<h3>Find both X and Y coordinates</h3>
<p>Click anywhere on the screen to see both X and Y coordinates of the cursor.</p>
<p id="result"></p>
<script>
function display(event) {
let x = event.clientX;
let y = event.clientY;
let result = document.getElementById("result");
result.innerHTML = "<b>X-coordinate: </b>" + x +
"<br><b>Y-coordinate: </b>" + y;
}
</script>
</body>
</html>
Key Points
clientXandclientYare relative to the viewport, not the entire documentThese properties work with various mouse events like click, mousemove, mousedown, etc.
Values are always in pixels and represent the distance from the top-left corner of the viewport
For document-relative coordinates, use
pageXandpageYinstead
Conclusion
The event.clientX and event.clientY properties provide an easy way to track mouse cursor coordinates in JavaScript. Use them together to get complete position information for interactive web applications.
19K+ Views
