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>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content