Propiedad pageY del MouseEvent

Eventos DOM MouseEvent

Definición y uso

Cuando se desencadena un evento de ratón, la propiedad pageY devuelve la coordenada vertical del puntero del ratón (relativa al documento).

El documento es la página web.

Consejo:Para obtener la coordenada horizontal del puntero del ratón (relativa al documento), utilice Propiedad pageX.

Nota:Esta propiedad es de solo lectura.

Nota:Esta propiedad no es estándar, pero es compatible con la mayoría de los navegadores principales.

Ejemplo

Ejemplo 1

Muestra las coordenadas del puntero del ratón cuando se hace clic en el elemento:

var x = event.pageX;     // Obtener la coordenada horizontal
var y = event.pageY;     // Obtener la coordenada vertical
var coor = "X coords: " + x + ", Y coords: " + y;

Prueba por tu cuenta

Ejemplo 2

Muestra las coordenadas del puntero del ratón cuando se mueve sobre el elemento:

var x = event.pageX;
var y = event.pageY; 
var coor = "X coords: " + x + ", Y coords: " + y;
document.getElementById("demo").innerHTML = coor;

Prueba por tu cuenta

Ejemplo 3

Muestra la diferencia entre clientX y clientY y screenX y screenY:

var pX = event.pageX;
var cX = event.clientX;
var pY = event.pageY;
var cY = event.clientY;
var coords1 = "page - X: " + pX + ", Y coords: " + pY;
var coords2 = "client - X: " + cX + ", Y coords: " + cY;

Prueba por tu cuenta

Sintaxis

event.pageY

Detalles técnicos

Valor devuelto: Valor numérico que representa la coordenada vertical del puntero del ratón en píxeles.
Versión DOM: Ninguno.

Compatibilidad del navegador

Atributo Chrome IE Firefox Safari Opera
pageY Soporte 12.0 Soporte Soporte Soporte

Páginas relacionadas

Manual de referencia de DOM HTML:Atributo pageX de MouseEvent

Manual de referencia de DOM HTML:Atributo clientX de MouseEvent

Manual de referencia de DOM HTML:Atributo clientY de MouseEvent

Manual de referencia de DOM HTML:Atributo screenX de MouseEvent

Manual de referencia de DOM HTML:Atributo screenY de MouseEvent

Eventos DOM MouseEvent