Obtenir les coordonnées du curseur avec JavaScript

Le fonction curPos() permet d'obtenir les coordonnées en pixels du curseur.

curPos()

Retourne les coordonnées du curseur dans la page et dans la zone d'affichage.

Syntaxe

curPos();

Paramètre

Aucun.

Valeurs de retour

La valeur de retour de la fonction curPos() est un objet de propriétés décrivant les positions du curseur.

Propriétés

clientX(Number)

La propriété clientX de la valeur de retour de la fonction curPos() définit la coordonnée horizontale du curseur dans la page, en pixels.

clientY(Number)

La propriété clientY de la valeur de retour de la fonction curPos() définit la coordonnée verticale du curseur dans la page, en pixels.

viewportX(Number)

La propriété viewportX de la valeur de retour de la fonction curPos() définit la coordonnée horizontale du curseur dans la zone d'affichage, en pixels.

viewportY(Number)

La propriété viewportY de la valeur de retour de la fonction curPos() définit la coordonnée verticale du curseur dans la zone d'affichage, en pixels.

document.addEventListener('click', function(e) {

  var positions = curPos();

  console.log({
    "Coordonnée horizontale dans la page":  positions.clientX,
    "Coordonnée verticale dans la page":    positions.clientY,
    "Coordonnée horizontale dans la zone d'affichage": positions.viewportX,
    "Coordonnée verticale dans la zone d'affichage":   positions.viewportY
  });

});

(function(c, u, r, p, o, s) {
  var x = {};
  x[r] = 0;
  x[p] = 0;
  x[o] = 0;
  x[s] = 0;
  document.addEventListener('mousemove', function(e) {
    x[o] = e[r];
    x[s] = e[p];
    x[r] = e[r] + c.scrollX;
    x[p] = e[p] + c.scrollY;
  });
  c.addEventListener('scroll', function() {
    x[s] = x[o] + c.scrollX;
    x[p] = x[r] + c.scrollY;
  });
  c[u] = function() {
    return x;
  };
})(window, 'curPos', 'clientX', 'clientY', 'viewportX', 'viewportY');