layerY property (event)
9 | ||||
Retrieves the y-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 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 y property provides similar functionality.
The layerY 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:
You can find the related objects in the Supported by objects section below.
This property is read-only.
Possible values:
Integer that represents the vertical positionof the mouse pointer, in pixels.
Default: this property has no default value.
Example HTML code 1:
This example illustrates the use of the layerY 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?
|
Supported by objects:
Related pages:
External links:
User Contributed Comments