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

y property (event)

A A

Font size

Browser support:

Sets or retrieves the y-coordinate of the mouse pointer relative to the top-left corner of the closest relatively positioned ancestor element of the element that fires the event.

Use the srcElement property to get the element that fires the event.

A relatively positioned element is an element whose position property is set to relative. If the mouse pointer is not inside a relatively positioned element, then the position is relative to the top-left corner of the document.

Note that the y property always returns the position relative to the top-left corner of the document in Safari.

In Firefox and Safari, the layerY property provides similar functionality.

The y 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.
If you need the element that is located at a specified position, use the elementFromPoint method.

Note that the y property retrieves the position of the mouse in physical pixel size in Internet Explorer earlier than version 8, while from version 8, it returns the position in logical pixel size.
For further details, please see the page for the clientY property.

Syntax:

object.y;

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

The y property is read-only in Opera and Safari. In Internet Explorer, it is read-only for the window.event object, but it is read/write for event objects created by the createEventObject method.

Possible values:

Integer that sets or retrieves the vertical position of the mouse pointer.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the y property:

<head>
    <script>
        function UpdateInfo (event) {
            var message = "";
            if (event.layerX !== undefined) {
                message += "layerX: " + event.layerX + ", layerY: " + event.layerY + "<br />";
            }
            if (event.x !== undefined) {
                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>