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

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

clientX property (event)

Browser support:

Sets or returns the x-coordinate of the mouse pointer relative to the top-left corner of the browser window's client area.

To get the y-coordinate of the mouse, use the clientY property.
If you need the position of the mouse pointer relative to the top-left corner of the screen, use the screenX and screenY properties.
To get the position relative to the top-left corner of the document, use the pageX and pageY properties.
If you need the element that is located at a specified position, use the elementFromPoint method.
If you want to get the size of the brower's client area, use the clientWidth and clientHeight properties of the html element.

Be careful about the clientX property!

In Internet Explorer earlier than version 8, the clientX property retrieves the position of the mouse in physical pixel size, 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 clientX property works differently from version 8 than in earlier versions.

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

For example, if the zoom level is 200%, the clientX property retrieves two times greater values before version 8 than from version 8 for the same mouse position. See the Example 2 below, it provides a cross-browser solution for the use of the clientX property.

Note that the value of the clientX property includes the width of the left border of the client area in Internet Explorer.

Syntax:

object.clientX;

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

The clientX 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 clientX property:

<head>
    <style>
        #flying {
            position: fixed; 
        }
    </style>
<!--[if lte IE 6]> 
    <style>
        #flying {
            position: absolute; /* ie6 does not support fixed position */
        }
    </style>
<![endif]--> 

    <script type="text/javascript">
        function UpdateFlyingObj (event) {
            var mouseX = Math.round (event.clientX);
            var mouseY = Math.round (event.clientY);

            var flyingObj = document.getElementById ("flying");
            flyingObj.style.left = mouseX + "px";
            flyingObj.style.top = mouseY + "px";

        }
    </script>
</head>
<body onmousemove="UpdateFlyingObj (event);">
    <div style="height:1000px;">The flying object also works for document scrolling.</div>

    <img id="flying" src="flying.gif" />
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example is the same as the previous one, but it also works in Internet Explorer 7 at non-default zoom levels:

<head>
    <style>
        #flying {
            position: fixed; 
        }
    </style>
<!--[if lte IE 6]> 
    <style>
        #flying {
            position: absolute; /* ie6 does not support fixed position */
        }
    </style>
<![endif]--> 

    <script type="text/javascript">
            // always return 1, except at non-default zoom levels in IE before version 8
        function GetZoomFactor () {
            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 UpdateFlyingObj (event) {
            var mouseX = event.clientX;
            var mouseY = event.clientY;

            if (navigator.appName.toLowerCase () == "microsoft internet explorer") {
                    // the clientX and clientY properties include 
                    // the left and top borders of the client area
                mouseX -= document.documentElement.clientLeft;
                mouseY -= document.documentElement.clientTop;

                var zoomFactor = GetZoomFactor ();
                if (zoomFactor != 1) {  // IE 7 at non-default zoom level
                    mouseX = Math.round (mouseX / zoomFactor);
                    mouseY = Math.round (mouseY / zoomFactor);
                }
            }


            var flyingObj = document.getElementById ("flying");
            flyingObj.style.left = mouseX + "px";
            flyingObj.style.top = mouseY + "px";
        }
    </script>
</head>
<body onmousemove="UpdateFlyingObj (event);">
    <div style="height:1000px;">The flying object also works for document scrolling.</div>

    <img id="flying" src="flying.gif" />
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

The previous two examples do not work properly in Internet Explorer 6 when the document is scrolled since they uses absolute positioned element instead of fixed in that browser. This example uses absolute positioned element in all browser and works all of them:

<head>
    <style>
        #flying {
            position: absolute; 
        }
    </style>

    <script type="text/javascript">
            // always return 1, except at non-default zoom levels in IE before version 8
        function GetZoomFactor () {
            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 GetScrollPositions () {
            if ('pageXOffset' in window) {  // all browsers, except IE before version 9
                var scrollLeft =  window.pageXOffset;
                var scrollTop = window.pageYOffset;
            }
            else {      // Internet Explorer before version 9
                var zoomFactor = GetZoomFactor ();
                var scrollLeft = Math.round (document.documentElement.scrollLeft / zoomFactor);
                var scrollTop = Math.round (document.documentElement.scrollTop / zoomFactor);
            }
            return {x : scrollLeft, y : scrollTop};
        }

        function UpdateFlyingObj (event) {
            var mouseX = event.clientX;
            var mouseY = event.clientY;

            if (navigator.appName.toLowerCase () == "microsoft internet explorer") {
                    // the clientX and clientY properties include 
                    // the left and top borders of the client area
                mouseX -= document.documentElement.clientLeft;
                mouseY -= document.documentElement.clientTop;

                var zoomFactor = GetZoomFactor ();
                if (zoomFactor != 1) {  // IE 7 at non-default zoom level
                    mouseX = Math.round (mouseX / zoomFactor);
                    mouseY = Math.round (mouseY / zoomFactor);
                }
            }

            var scrollPos = GetScrollPositions ();

            var flyingObj = document.getElementById ("flying");
            flyingObj.style.left = mouseX + scrollPos.x + "px";
            flyingObj.style.top = mouseY + scrollPos.y + "px";
        }
    </script>
</head>
<body onmousemove="UpdateFlyingObj (event);">
    <div style="height:1000px;">The flying object also works for document scrolling.</div>

    <img id="flying" src="flying.gif" />
</body>