In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > event handling > properties > x (event)

x property (event)

Browser support:

Sets or retrieves the x-coordinate of the mouse pointer relative to the top-left corner of the closest relatively positioned ancestor element of the element that fires the event.

Use the srcElement property to get the element that fires the event.

A relatively positioned element is an element whose position property is set to relative. If the mouse pointer is not inside a relatively positioned element, then the position is relative to the top-left corner of the document.

Note that the x property always returns the position relative to the top-left corner of the document in Google Chrome and Safari.

In Firefox, Google Chrome, Safari and Internet Explorer from version 9, the layerX property provides similar functionality.

The x property is rarely useful, use other event properties instead.

To get the position relative to the top-left corner of the document, use the pageX and pageY properties.
If you need the position of the mouse pointer relative to the top-left corner of the browser window's client area, use the clientX and clientY properties.
To get the position relative to the top-left corner of the screen, use the screenX and screenY properties.
Or, if you need the element that is located at a specified position, use the elementFromPoint method.

Note that the x property retrieves the position of the mouse in physical pixel size in Internet Explorer earlier than version 8, while from version 8, it returns the position in logical pixel size.
For further details, please see the page for the clientX property.

Syntax:

object.x;

You can find the related objects in the Supported by objects section below.

The x property is read-only, except if the event object is created with the createEventObject method when it is read/write.

Possible values:

Integer that sets or retrieves the horizontal position of the mouse pointer.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the x property:

<head>
    <script type="text/javascript">
        function UpdateInfo (event) {
            var message = "";
            if ('layerX' in event) {
                message += "layerX: " + event.layerX + ", layerY: " + event.layerY + "<br />";
            }
            if ('x' in event) {
                message += "x: " + event.x + ", y: " + event.y;
            }

            var info = document.getElementById ("info");
            info.innerHTML = message;
        }
    </script>
</head>
<body onmousemove="UpdateInfo (event);">
    <div style="position:relative; left:0px; top:0px; width:300px; height:50px; background-color:#a0e0b0;">
        A relatively positioned element
    </div>
    <div style="position:absolute; left:10px; top:80px; width:300px; height:50px; background-color:#a0e0e0;">
        An absolutely positioned element
    </div>
    <div style="position:fixed; left:170px; top:100px; width:300px; height:50px; background-color:#e0e0a0;">
        A fixed positioned element
    </div>
    <div id="info" style="position:fixed; left:200px; top:220px; width:200px; height:40px; background-color:#e0a0a0;"></div>
</body>