Propiedad pageX del MouseEvent

Eventos DOM MouseEvent

Definición y uso

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

El documento es la página web.

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

Comentarios:Esta propiedad es de solo lectura.

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

Ejemplo

Ejemplo 1

Mostrar las coordenadas del puntero del ratón al hacer 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 ti mismo

Ejemplo 2

Mostrar las coordenadas del puntero del ratón al moverse 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 ti mismo

Ejemplo 3

Demostración de la diferencia entre pageX y pageY y screenX y screenY:

var pX = event.screenX;
var cX = event.pageX;
var pY = event.screenY;
var cY = event.pageY;
var coords1 = "page - X: " + pX + ", Y coords: " + pY;
var coords2 = "screen - X: " + cX + ", Y coords: " + cY;

Prueba por ti mismo

Sintaxis

event.pageX

Detalles técnicos

Valor devuelto: Número, que representa la coordenada horizontal del puntero del ratón en píxeles.
Versión DOM: Ninguno.

Compatibilidad del navegador

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

Páginas relacionadas

Manual de referencia del DOM HTML:Propiedad pageY del MouseEvent

Manual de referencia del DOM HTML:Propiedad clientX del MouseEvent

Manual de referencia del DOM HTML:Propiedad clientY del MouseEvent

Manual de referencia del DOM HTML:Propiedad screenX del MouseEvent

Manual de referencia del DOM HTML:Propiedad screenY del MouseEvent

Eventos DOM MouseEvent