Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App
geeksforgeeks
Browser
Continue

Related Articles

JavaScript Coordinates of Mouse

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

In JavaScript, we have methods that help us to capture the location of the mouse on the screen. The top left corner of the screen is (0, 0) i,e, X and Y coordinates are (0, 0). This means that vertical zero is the topmost point and horizontal zero is the leftmost point. 
So, the task is to find the coordinates of the mouse over the screen.

It can be implemented using the clientX and clientY methods of the event: 

  • event.clientX: It gives the horizontal coordinate of the event.
  • event.clientY: It gives the vertical coordinate of the mouse.

Syntax: 

// For X coordinate
event.ClientX
// For Y coordinate 
event.ClientY

Example: 

HTML




<script>
    function coordinate(event) {
        var x=event.clientX;
        var y=event.clientY;
        document.getElementById("X").value=x;
        document.getElementById("Y").value=y;
    }
</script>
  
<body onmousemove="coordinate(event)">
    X-coordinate
    <input type="text" id="X">
    <br>
    <br>
    Y-coordinate
    <input type="text" id="Y">
</body>

Output: 

 

 

My Personal Notes arrow_drop_up
Last Updated : 13 Dec, 2022
Like Article
Save Article
Similar Reads
Related Tutorials