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

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

offsetX property (event)

Browser support:

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

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

The offsetX 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.

Syntax:

object.offsetX;

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

The offsetX 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, in pixels.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the offsetX property:

<head>
    <script type="text/javascript">
        function UpdateInfo (event) {
            var message = "";
            if ('offsetX' in event) {
                message = "offsetX: " + event.offsetX + ", offsetY: " + event.offsetY + "<br />";
            }
            else {
                message = "Your browser does not support this example!";
            }

            var info = document.getElementById ("info");
            info.innerHTML = message;
        }
    </script>
</head>
<body onmousemove="UpdateInfo (event);">
    <textarea>Move the mouse over this page.</textarea>
    <br /><br />
    <div id="info" style="width:200px; height:40px; background-color:#e0a0a0;"></div>
</body>