JavaScript onmouse Events

JavaScript Coordinates of Mouse

Last Updated : 28 Dec, 2023

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 coordinate
event.ClientX
// For Y coordinate 
event.ClientY

Approach

HTML 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:

JavaScript onmouse Events

N

Naman_Garg

Improve

Article Tags :

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

JavaScript contextmenu MouseEvent

When we click the right mouse button on our desktop, a menu-like box appears and this box is called the context menu. In JavaScript, a context menu event runs when a user tries to open a context menu. This can be done by clicking the right mouse button. This article demonstrates executing any operat

JavaScript MouseEvent altKey Property

The mouseEvent altKey property is used to define whether the alt key is pressed or not. It is a boolean value. When the alt key is pressed then on click of the mouse buttons it returns true and if it is not pressed then it returns false. Syntax: event.altKey Return Value: It returns a boolean value

JavaScript MouseEvent ctrlKey Property

The mouseEvent ctrlKey property is used to define whether the ctrl key is pressed or not. It is a boolean value. When the ctrl key is pressed then on click of the mouse buttons it returns true and if it is not pressed then it returns false. Syntax: event.ctrlKey Return Value: It returns a boolean va

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

Javascript MouseEvent getModifierState() Method

The mouseEvent.getModifierState() method is used to determine the state of a specified modifier key at the time an event occurs. It returns true if the specified modifier key is being pressed, and false if it is not. The following modifier keys are active only while they are being pressed: AltContro

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. [GFGTABS] HTML

JavaScript Math atan2() Method

Javascript Math.atan2() method is used to return the arctangent of the quotient of its arguments. The Math.atan2() method returns a numeric value between -Î and Î representing the angle theta of an (x, y) point and the positive x-axis. This is the counterclockwise angle, measured in radians, between

Pointer Events in Javascript DOM

Pointer events are a set of DOM (Document Object Model) events that provide a unified way of handling inputs from a variety of devices, such as touchscreens, mouse, and pen/stylus. These events are supported by modern browsers and allow developers to write code that responds to user interactions wit

What are JavaScript Events ?

JavaScript Events are the action that happens due to the interaction of the user through the browser with the help of any input field, button, or any other interactive element present in the browser. Events help us to create more dynamic and interactive web pages. Also, these events can be used by t