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

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

layerX property (event)

Browser support:

9

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

Use the target and srcElement properties to get the element that fires the event. A positioned element is an element whose position property is set to relative, absolute or fixed. If the mouse pointer is not inside a positioned element, then the position is relative to the top-left corner of the document.

In Internet Explorer, Opera, Google Chrome and Safari, the x property provides similar functionality.

The layerX 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.layerX;

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 layerX 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>