Web/API/UIEvent/pageY

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

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`pageY` Deprecated'Non-standard'	Chrome No support ? — 44 Notes' No support ? — 44 Notes' Notes' Replaced by `MouseEvent.pageY` in version 45.	Edge Full support 12	Firefox ?	IE Full support 9	Opera ?	Safari ?	WebView Android No support ? — 44 Notes' No support ? — 44 Notes' Notes' Replaced by `MouseEvent.pageY` in version 45.	Chrome Android No support ? — 44 Notes' No support ? — 44 Notes' Notes' Replaced by `MouseEvent.pageY` in version 45.	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android No support ? — 4.0 Notes' No support ? — 4.0 Notes' Notes' Replaced by `MouseEvent.pageY` in Samsung Internet 5.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.