Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to find the coordinates of the cursor relative to the screen with JavaScript?
In this tutorial, we will learn how we can get the coordinates of the mouse cursor relative to the screen with JavaScript. We will find the position of the cursor vertically (Y-axis) and Horizontally (X-axis) relative to the screen.
JavaScript allows us to use two different properties to get the coordinates of the mouse cursor relative to the screen when the mouse button is pressed anywhere on the screen −
- Using the event.screenX Property
- Using the event.screenY Property
Let us discuss both of them one by one with code examples.
Using the event.screenX Property
The event.screenX property is used to get the coordinates of the X-axis or the horizontal position of the cursor, where it was clicked on the screen. It will return a numeric value that represents the horizontal position of the cursor.
Syntax
The below syntax will show how we can get X-coordinate or horizontal position using the event.screenX −
function function_name(event){
let X=event.screenX;
}
Steps
- Step 1 − In the first step, we will declare the callback function for the event that will be called whenever the event triggers.
- Step 2 − In the next step, we have to declare a variable and assign it a value using the event.screenX property, which holds the value of X-coordinate where the event was triggered or click event occurred.
- Step 3 − In the third step, we have displayed the value of the X-coordinate of the cursor that is stored in the variable declared in the previous step.
Example
Below example will explain how we can get the X-coordinate of the cursor where it was clicked using the event.screenX property.
<!DOCTYPE html> <html onclick="display(event)"> <body> <h3>Find the coordinates of the cursor relative to the screen</h3> <p id="para">Click anywhere on the screen to see X coordinate of the cursor.</p> <p id="result"></p> <script> function display(event) { let x = event.screenX; let result = document.getElementById("result"); result.innerHTML = "<b>X-coordinate: </b>" + x; } </script> </body> </html>
In above example, we have used the onclick event on the root element of the HTML document, so that it allow us to click anywhere on the screen and get the horizontal position or the X-coordinate value of the cursor, where the event was triggered or the click occurred.
Using event.screenY property
It is used to get the vertical position of the cursor or the Y-axis coordinate, where the cursor was clicked or the event was triggered. Similar to the event.screenX it also return a numeric value that represents the vertical position of the cursor.
Syntax
The below syntax will allow you to get the Y-coordinate or the vertical position of the cursor, where it was clicked.
function function_name(event){
let Y=event.screenY;
}
Steps
- Step 1 − In first step, we will declare the callback function for the event that will be called whenever the event triggers.
- Step 2 − In next step, we have to declare a variable and assign it a value using event.screenY that holds the value of Y-coordinate, where event was triggered or click event occurred.
- Step 3 − In third step, we have the display the value of Y-coordinate of cursor that was stored in the newly declared variable in previous step.
Example
<!DOCTYPE html> <html onclick="display(event)"> <body> <h3>Find the coordinates of the cursor relative to the screen</h3> <p id="para">Click anywhere on the screen to see Y-coordinate of the cursor.</p> <p id="result"></p> <script> function display(event) { let Y = event.screenY; let result = document.getElementById("result"); result.innerHTML = "<b>Y-coordinate: </b>" + Y; } </script> </body> </html>
In above example, we have used the onclick event on the root element (html) of the HTML document, so that it allows us to click anywhere on the screen and get the vertical position or the Y-coordinate of the cursor, where the event was triggered or the click occurred.
Let us see the use of both the properties to get the value of X and Y-coordinate or horizontal and vertical position of cursor simultaneously
Steps
- Step 1 − In first step, we will declare the callback function for the event that will be called whenever the event triggers.
- Step 2 − In next step, we have to declare two variables and assign values to them using event.screenX and event.screenY, that holds the value of X-coordinate and Ycoordinate respectively, where the event was triggered or click event occurred.
- Step 3 − In third step, we have the display the values of X-coordinate and Y-coordinate of cursor that is stored in the variables declared in previous step.
Example
Below example will show the X and Y- axis coordinates of the cursor −
<!DOCTYPE html> <html onclick="display(event)"> <body> <h3>Find the coordinates of the cursor relative to the screen</h3> <p id="para">Click anywhere on the screen to see X and Y-coordinate of the cursor using JavaScript properties.</p> <p id="result"></p> <script> function display(event) { let X = event.screenX; let Y = event.screenY; let result = document.getElementById("result"); result.innerHTML = "<b>X-coordinate: </b>" + X + "<br><b>Ycoordinate: </b>: " + Y; } </script> </body> </html>
Again, in this example, we used the event on the HTML element to get the global access of the click event to click anywhere on the screen.
In this tutorial, we have seen the two properties to get the coordinates of the cursor relative to the screen and discussed both of them with help of individual code examples as well as the integrated example where we used both the properties to get the vertical and horizontal position of the cursor relative to the screen.
4K+ Views
