JavaScript Coordinates of Mouse Last Updated : 28 Dec, 2023 Comments Improve Suggest changes Like Article Like Report 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. In this article, we are going to learn how to find the Coordinates of the Mouse cursor in JavaScript. 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 coordinateevent.ClientX// For Y coordinate event.ClientYApproachHTML structure with head, meta tags, and script for JavaScript.JavaScript function coordinate(event) captures mouse coordinates using event.clientX and event.clientY.The function updates input fields with IDs "X" and "Y" using document.getElementById.onmousemove the attribute in the body triggers the coordinate function on mouse movement.Display X and Y coordinates in real-time using input fields with IDs "X" and "Y" in the HTML body.Example: Below is the implementation of the above approach. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <script> function coordinate(event) { let x = event.clientX; let 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> </html> Output: Comment More infoAdvertise with us Next Article JavaScript Coordinates of Mouse N Naman_Garg Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Events Similar Reads JavaScript onmouse Events The onmouse event is used to define the operation using the mouse. JavaScript onmouse events are: onmouseover and onmouseoutonmouseup and onmousedownonmouseenter and onmouseleave JavaScript onmouseover and onmouseout: The onmouseover and onmouseout events occur when the mouse cursor is placed over s 1 min read JavaScript MouseEvent Button Property The MouseEvent button property is used to define the left or right-click events. When the mouse button is clicked then it returns an integer value which describes the left, right, or middle mouse button. Syntax: event.button Return Value: This event returns an integer value on mouse click events are 2 min read JavaScript Cursor Property Style.cursor specifies the mouse cursor to be displayed when pointing over an element. Syntax:object.style.cursor = "cursorValue";Some important mouse pointers are as follows: waithelpmovepointercrosshaircellnoneExample 1: This example shows the use of the JavaScript cursor property. HTML <html 2 min read Javascript MouseEvent which Property The mouse event which property is used to return a number that corresponds to the pressed mouse button when a mouse event is triggered Syntax: event.which Return value: It returns a number indicating which mouse button is pressed: For left mouse button: 1 is returnedFor middle mouse button: 2 is ret 1 min read JavaScript for Capturing mouse positions after every given interval The JavaScript language was initially created for web browsers. Since then, it evolved and became a language with many uses and platforms. It lets us interact with the browser using events. Events are signals that something has happened. When JavaScript is used in HTML pages, JavaScript can react to 3 min read Like