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

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

pageX property (event)

Browser support:

9

Retrieves the x-coordinate of the mouse pointer relative to the top-left corner of the document.

To get the y-coordinate of the mouse, use the pageY property.
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.pageX;

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

This property is read-only.

Possible values:

Integer that represents 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 pageX property:

<head>
    <script type="text/javascript">
        function UpdateInfo (event) {
            if ('pageX' in event) { // all browsers except IE before version 9
                var pageX = event.pageX;
                var pageY = event.pageY;
            }
            else {  // IE before version 9
                var pageX = event.clientX + document.documentElement.scrollLeft;
                var pageY = event.clientY + document.documentElement.scrollTop;
            }

            var message = "screenX: " + event.screenX + ", screenY: " + event.screenY + "<br />";
            message += "clientX: " + event.clientX + ", clientY: " + event.clientY + "<br />";
            message += "pageX: " + pageX + ", pageY: " + pageY;

            var info = document.getElementById ("info");
            info.innerHTML = message;
        }
    </script>
</head>
<body onmousemove="UpdateInfo (event);">
    <div style="height:1000px;">Move your mouse or scroll the document.</div>
    <div id="info" style="height:65px; width:200px; left:100px; top:100px; background-color:#e0a0a0; position:fixed;"></div>
</body>