MouseEvent pageY Property - Javascript DOM

Javascript examples for DOM:Mouse Event

  1. HOME
  2. Javascript
  3. DOM
  4. Mouse Event

Description

The pageY property returns the vertical coordinate of the mouse pointer.

This property is read-only.

Return Value

A Number, representing the vertical coordinate of the mouse pointer, in pixels

The following code shows how to Output the coordinates of the mouse pointer when the mouse button is clicked on an element:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
div {/*from  w  w w  .ja va  2  s. c o m*/
    width: 200px;
    height: 100px;
    border: 1px solid black;
}
</style>
</head>
<body>

<div onmousemove="showCoords(event)" onmouseout="clearCoor()"></div>

<p id="demo"></p>

<script>
function showCoords(event) {
    var x = event.pageX;
    var y = event.pageY;
    var coor = "X coords: " + x + ", Y coords: " + y;
    document.getElementById("demo").innerHTML = coor;
}

function clearCoor() {
    document.getElementById("demo").innerHTML = "";
}
</script>

</body>
</html>

Related Tutorials