Attributo clientX dell'oggetto MouseEvent

Eventi DOM MouseEvent

Definizione e uso

Quando un evento di mouse viene attivato, l'attributo clientX restituisce la coordinata orizzontale del puntatore del mouse (in base all'area del client).

L'area del client è la finestra corrente.

Suggerimento:Per ottenere la coordinata verticale del puntatore del mouse (in base all'area del client), utilizzare Proprietà clientY.

Nota:Questa proprietà è sola lettura.

Esempio

Esempio 1

Mostra le coordinate del puntatore del mouse quando si clicca sul pulsante del mouse sull'elemento:

var x = event.clientX;     // Ottieni la coordinata orizzontale
var y = event.clientY;     // Ottieni la coordinata verticale
var coor = "X coords: " + x + ", Y coords: " + y;

Prova personalmente

Esempio 2

Mostra le coordinate del puntatore del mouse quando si muove sopra l'elemento:

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

Prova personalmente

Esempio 3

Mostra la differenza tra clientX e clientY e tra screenX e 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;

Prova personalmente

Sintassi

event.clientX

Dettagli tecnici

Valore di ritorno: Valore numerico che rappresenta la coordinata orizzontale del puntatore del mouse, in pixel.
Versione DOM: DOM Level 2 Events

Supporto del browser

Proprietà Chrome IE Firefox Safari Opera
clientX Supporto Supporto Supporto Supporto Supporto

Pagine correlate

Manuale di riferimento HTML DOM DOM:Proprietà clientY dell'oggetto MouseEvent

Manuale di riferimento HTML DOM DOM:Proprietà screenX dell'oggetto MouseEvent

Manuale di riferimento HTML DOM DOM:Proprietà screenY dell'oggetto MouseEvent

Manuale di riferimento HTML DOM DOM:Proprietà offsetX dell'oggetto MouseEvent

Manuale di riferimento HTML DOM DOM:Proprietà offsetY dell'oggetto MouseEvent

Eventi DOM MouseEvent