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

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

screenX property (event)

Browser support:

Sets or retrieves the x-coordinate of the mouse pointer relative to the top-left corner of the screen.

To get the y-coordinate of the mouse pointer, use the screenY 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 document, use the pageX and pageY properties.
Or, if you need the element that is located at a specified position, use the elementFromPoint method.

Be careful about the screenX property!

The screenX property retrieves the position of the mouse in physical pixel size in Firefox, Opera, Google Chrome, Safari and in Internet Explorer earlier than version 8, while from version 8, it returns the position in logical pixel size.

What does it mean?
If the browser is not at the normal zoom level (the user has the ability to zoom in or out a web page: CTRL and +, CTRL and -), the screenX property works differently in Internet Explorer from version 8 than in other browsers.

The position of the mouse pointer is calculated in the current pixel size of the document in Internet Explorer from version 8.
In Firefox, Opera, Google Chrome, Safari and in Internet Explorer before version 8, the position is calculated in the default pixel size.

For example, if the zoom level is 200%, the screenX property retrieves two times smaller values in Internet Explorer from version 8 than in other browsers for the same mouse position. For further details, please see the examples below.

Syntax:

object.screenX;

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

The screenX 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 screenX 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>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example is similar to the previous one, but it repairs the coordinates in Internet Explorer at non-default zoom level:

<head>
    <script type="text/javascript">
            // always return 1, except at non-default zoom levels in IE before version 8
        function GetZoomFactorIE7 () {
            var factor = 1;
            if (document.body.getBoundingClientRect) {
                    // rect is only in physical pixel size in IE before version 8 
                var rect = document.body.getBoundingClientRect ();
                var physicalW = rect.right - rect.left;
                var logicalW = document.body.offsetWidth;

                    // the zoom level is always an integer percent value
                factor = Math.round ((physicalW / logicalW) * 100) / 100;
            }
            return factor;
        }

        function GetZoomLevelIE () {
                // IE before version 8
            if (screen.systemXDPI === undefined) {
                return GetZoomLevelIE7 ();
            }
            // the zoom level is always an integer percent value
            return Math.round ((screen.deviceXDPI / screen.logicalXDPI) * 100) / 100;
        }

        function UpdateInfo (event) {

            var sX = event.screenX;
            var sY = event.screenY;
            var cX = event.clientX;
            var cY = event.clientY;
            
            if ('deviceXDPI' in screen) {   // Internet Explorer
                if ('systemXDPI' in screen) {   // IE from version 8
                    var pX = cX + document.documentElement.scrollLeft;
                    var pY = cY + document.documentElement.scrollTop;
                        // the screenX and screenY properties are in logical pixel size
                    var zoomFactor = Math.round ((screen.deviceXDPI / screen.logicalXDPI) * 100) / 100;
                    sX = Math.round (sX * zoomFactor);
                    sY = Math.round (sY * zoomFactor);
                }
                else {  // IE before version 8
                        // the clientX, clientY, scrollLeft and scrollTop properties are in physical pixel size
                    var zoomFactor = GetZoomFactorIE7 ();
                    var pX = Math.round ((cX + document.documentElement.scrollLeft) / zoomFactor);
                    var pY = Math.round ((cY + document.documentElement.scrollTop) / zoomFactor);
                    cX = Math.round (cX / zoomFactor);
                    cY = Math.round (cY / zoomFactor);
                }
            }
            else {  // Firefox, Opera, Google Chrome and Safari
                var pX = event.pageX;
                var pY = event.pageY;
            }


            var message = "screenX: " + sX + ", screenY: " + sY + "<br />";
            message += "clientX: " + cX + ", clientY: " + cY + "<br />";
            message += "pageX: " + pX + ", pageY: " + pY;

            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>