HTML | DOM Style borderImageWidth Property

HTML DOM MouseEvent clientX Property

Last Updated : 01 Oct, 2024

The mouse event clientX property returns the horizontal coordinate (X-axis) of the mouse pointer in relation to the viewport when a mouse event occurs. It captures the mouse’s position without considering any scroll offset.

Syntax:

event.clientX

Return Value: clientX returns the mouse pointer’s X-coordinate relative to the viewport.

Example: The below example Finds the X-coordinates of the mouse pointer when the mouse clicked anywhere in viewport.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MouseEvent.clientX Example</title>
</head>

<body>
    <h3>Click anywhere to get the mouse X position</h3>
    <p id="output">Mouse X position will appear here.</p>

    <script>
        document.addEventListener('click', function (event) {
            const mouseX = event.clientX;
            document.getElementById('output').textContent = `Mouse X: ${mouseX}px`;
        });
    </script>
</body>

</html>

Output:

mouseEvent

Mouse Event

Supported Web Browsers:

Opera
Google Chrome
Firefox
Apple Safari

HTML | DOM Style borderImageWidth Property

S

Shubrodeep Banerjee

Improve

Article Tags :

Similar Reads

HTML | DOM TouchEvent targetTouches Property

The TouchEvent targetTouches property is a read-only property and used for returning an array of Touch objects. It returns one object for each finger that is touching the current target element. Syntax : event.targetTouches Below program illustrates the TouchEvent targetTouches property : Example: F

HTML | DOM UiEvent detail Property

The UiEvent detail property is used for returning a number with details about an event. The UiEvent detail property returns number which indicates the current click count when used on onclick and ondblclick whereas when used on onmousedown and onmouseup, it returns a number which indicates the curre

HTML | DOM Style cssFloat Property

The style cssFloat property in HTML DOM is used to set or returns the horizontal alignment of element. This property allows an element to float right or left side of the parent body with rest of the elements wrapped around it. Syntax: It returns the cssFloat property.object.style.cssFloatIt is used

HTML | DOM Script Object

The DOM Script Object is used to represent the HTML <script> element. The script element is accessed by getElementById(). Properties: async: It is used to specify the script is executed asynchronously. charset: It is used to specify the character encoding used in an external script file. defer

HTML | DOM Style textShadow Property

The style textShadow property in HTML DOM is used to set the shadow effects for text. We can set more than one shadow effects by using this property. This property can also return the shadow effects of a text. Syntax: It returns the textShadow property.object.style.textShadowIt used to set the textS

HTML DOM MouseEvent pageY Property

The MouseEvent pageY property is a read-only property and used for returning the vertical coordinate of the mouse pointer when an event has triggered. Syntax :event.pageYReturn Value: It returns a number which represents the vertical coordinate of the mouse pointer in pixels. Below program illustrat

HTML | DOM Style animationDirection Property

The animationDirection property is used to set or return the animation direction. This property will have no effect if the animation is set to place only once. Syntax: It returns the animationDirection Property.object.style.animationDirection;It is used to set the animationDirection Property.object.

HTML | DOM Storage key() Method

The DOM Storage key() Method is related to the Storage object and is used to return the name of the key with the specified index. Storage object can be either a localStorage or sessionStorage Object. Syntax: Local storage:localStorage.key(index)Session storage:sessionStorage.key(index) Parameters: I

HTML | DOM Style opacity Property

The Style opacity property in HTML DOM used to set opacity level for an element. Opacity level defines the transparency level where value 1 represents not transparent, 0.5 represents 50% transparency and 0 represents completely transparent.It also returns opacity level of an element. Syntax: It retu

HTML | DOM Storage removeItem() Method

The DOM Storage removeItem() Method is related to the Storage object and is used to remove the specified storage object item. Storage object can be either a localStorage or sessionStorage Object. Syntax: Local Storage Remove Item: localStorage.key(keyname)Session Storage Remove Item: sessionStorage.