MouseEvent pageX Property

Ejemplo

Salida de las coordenadas del puntero del ratón cuando se hace clic en el botón del ratón sobre un elemento:

var x = event.pageX; // Get the horizontal coordinate
var y = event.pageY; // Get the vertical coordinate
var coor = "X coords: " + x + ", Y coords: " + y;

El resultado de coor podría ser:

X coords: 162, Y coords: 40

Inténtalo tú mismo "

Más "Try it Yourself" ejemplos a continuación.

Definición y Uso

La propiedad pageX devuelve la coordenada horizontal (según el documento) del puntero del ratón cuando se desencadena un evento de ratón.

El documento es la página web.

Consejo: Para obtener la coordenada vertical (según el documento) del puntero del ratón, utilice el pageY propiedad.

Nota: Esta propiedad es de sólo lectura.

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

Soporte del navegador

Propiedad
pageX	Sí	12.0	Sí	Sí	Sí

Sintaxis

event .pageX

Detalles técnicos

Valor de retorno:	Un número, que representa la coordenada horizontal del puntero del ratón en píxeles
DOM Versión:	Ninguna

Más ejemplos

Ejemplo

Salida de las coordenadas del puntero del ratón mientras el puntero del ratón sobre un elemento:

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

Inténtalo tú mismo "

Ejemplo

Una demostración de las diferencias 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;

Inténtalo tú mismo "