Propiedad clientX del MouseEvent

Eventos DOM MouseEvent

Definición y uso

Cuando se desencadena un evento de ratón, la propiedad clientX devuelve la coordenada horizontal del puntero del ratón (según el área del cliente).

El área del cliente es la ventana actual.

Consejo：Para obtener la coordenada vertical del puntero del ratón (según el área del cliente), utilice Atributo clientY。

Comentarios：Esta propiedad es de solo lectura.

Ejemplo

Ejemplo 1

Escribe las coordenadas del puntero del ratón cuando se hace clic en el botón del ratón en el elemento：

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

Prueba tú mismo

Ejemplo 2

Escribe las coordenadas del puntero del ratón cuando se mueve sobre el elemento：

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

Prueba tú mismo

Ejemplo 3

Muestra la diferencia 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;

Prueba tú mismo

Sintaxis

event.clientX

Detalles técnicos

Valor devuelto： Valor numérico que representa la coordenada horizontal del puntero del ratón, en píxeles.
Versión DOM： Nivel 2 de eventos DOM

Compatibilidad del navegador

Atributos Chrome IE Firefox Safari Opera
clientX Soporte Soporte Soporte Soporte Soporte

Páginas relacionadas

Manual de referencia de DOM HTML:Atributo clientY del MouseEvent

Manual de referencia de DOM HTML:Atributo screenX del MouseEvent

Manual de referencia de DOM HTML:Atributo screenY del MouseEvent

Manual de referencia de DOM HTML:Atributo offsetX del MouseEvent

Manual de referencia de DOM HTML:Atributo offsetY del MouseEvent

Eventos DOM MouseEvent