Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
The UIEvent.pageY
read-only property returns the vertical coordinate of the event relative to the whole document.
Syntax
var pageY = event.pageY;
pageY
is an integer value in pixels for the y-coordinate of the mouse pointer, relative to the whole document, when the mouse event fired. This property takes into account any vertical scrolling of the page.
Example
<html> <head> <title>pageX\pageY & layerX\layerY example</title> <script type="text/javascript"> function showCoords(evt){ var form = document.forms.form_coords; var parent_id = evt.target.parentNode.id; form.parentId.value = parent_id; form.pageXCoords.value = evt.pageX; form.pageYCoords.value = evt.pageY; form.layerXCoords.value = evt.layerX; form.layerYCoords.value = evt.layerY; } </script> <style type="text/css"> #d1 { border: solid blue 1px; padding: 20px; } #d2 { position: absolute; top: 180px; left: 80%; right:auto; width: 40%; border: solid blue 1px; padding: 20px; } #d3 { position: absolute; top: 240px; left: 20%; width: 50%; border: solid blue 1px; padding: 10px; } </style> </head> <body onmousedown="showCoords(event)"> <p>To display the mouse coordinates please click anywhere on the page.</p> <div id="d1"> <span>This is an un-positioned div so clicking it will return layerX/layerY values almost the same as pageX/PageY values.</span> </div> <div id="d2"> <span>This is a positioned div so clicking it will return layerX/layerY values that are relative to the top-left corner of this positioned element. Note the pageX\pageY properties still return the absolute position in the document, including page scrolling.</span> <span>Make the page scroll more! This is a positioned div so clicking it will return layerX/layerY values that are relative to the top-left corner of this positioned element. Note the pageX\pageY properties still return the absolute position in the document, including page scrolling.</span> </div> <div id="d3"> <form name="form_coords"> Parent Element id: <input type="text" name="parentId" size="7" /><br /> pageX:<input type="text" name="pageXCoords" size="7" /> pageY:<input type="text" name="pageYCoords" size="7" /><br /> layerX:<input type="text" name="layerXCoords" size="7" /> layerY:<input type="text" name="layerYCoords" size="7" /> </form> </div> </body> </html>
Specifications
This property is not part of any specification.
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
pageY | Chrome
No support
? — 44
| Edge Full support 12 | Firefox ? | IE Full support 9 | Opera ? | Safari ? | WebView Android
No support
? — 44
| Chrome Android
No support
? — 44
| Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android
No support
? — 4.0
|
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- Non-standard. Expect poor cross-browser support.
- Non-standard. Expect poor cross-browser support.
- Deprecated. Not for use in new websites.
- Deprecated. Not for use in new websites.
- See implementation notes.
- See implementation notes.