MouseEvent clientX 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.clientX; // Get the horizontal coordinate
var y = event.clientY; // Get the vertical coordinate
var coor = "X coords: " + x + ", Y coords: " + y;

El resultado de coor podría ser:

X coords: 142, Y coords: 99

Inténtalo tú mismo "

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

Definición y Uso

La propiedad clientX devuelve la coordenada horizontal (according to the client area) del puntero del ratón cuando se desencadena un evento de ratón.

El área de cliente es la ventana actual.

Consejo: Para obtener la coordenada vertical (de acuerdo con el área de cliente) del puntero del ratón, utilice el clientY propiedad.

Nota: Esta propiedad es de sólo lectura.

Soporte del navegador

Propiedad
clientX	Sí	Sí	Sí	Sí	Sí

Sintaxis

event .clientX

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:	DOM nivel 2 Eventos

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.clientX;
var y = event.clientY;
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 cX = event.clientX;
var sX = event.screenX;
var cY = event.clientY;
var sY = event.screenY;
var coords1 = "client - X: " + cX + ", Y coords: " + cY;
var coords2 = "screen - X: " + sX + ", Y coords: " + sY;

Inténtalo tú mismo "