Propriété clientX de MouseEvent

Événements DOM MouseEvent

Définition et utilisation

Lorsque l'événement souris est déclenché, la propriété clientX retourne la coordonnée horizontale du pointeur de la souris (selon la zone client).

La zone client est la fenêtre actuelle.

Astuce :Pour obtenir la coordonnée verticale du pointeur de la souris (selon la zone client), utilisez Propriété clientY.

Remarque :Cette propriété est lecture seule.

Exemple

Exemple 1

Affichez les coordonnées du pointeur de la souris lorsque le bouton de la souris est cliqué sur l'élément :

var x = event.clientX;     // Obtenir la coordonnée horizontale
var y = event.clientY;     // Obtenir la coordonnée verticale
var coor = "X coords: " + x + ", Y coords: " + y;

Essayez-le vous-même

Exemple 2

Affichez les coordonnées du pointeur de la souris lorsque le pointeur se déplace sur l'élément :

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

Essayez-le vous-même

Exemple 3

Montrez la différence entre clientX et clientY ainsi que screenX et 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;

Essayez-le vous-même

Syntaxe

event.clientX

Détails techniques

Valeur de retour : Valeur numérique, représentant la coordonnée horizontale du pointeur de la souris, en pixels.
Version DOM : Niveau 2 des événements DOM

Support du navigateur

Propriétés Chrome IE Firefox Safari Opera
clientX Support Support Support Support Support

Pages associées

Manuel de référence HTML DOM :Propriété clientY de MouseEvent

Manuel de référence HTML DOM :Propriété screenX de MouseEvent

Manuel de référence HTML DOM :Propriété screenY de MouseEvent

Manuel de référence HTML DOM :Propriété offsetX de MouseEvent

Manuel de référence HTML DOM :Propriété offsetY de MouseEvent

Événements DOM MouseEvent