Obtenir les coordonnées du curseur avec JavaScript

"curPos" est un plugin JavaScript qui permet de récupérer les coordonnées en pixels du curseur, relatives à la fenêtre du navigateur et / ou à la zone d'affichage (viewport).

Il ajoute à l'objet "window" un objet nommé "curPos" avec les 4 propriétés suivantes :

  • "clientX" : coordonnée horizontale en pixels du curseur en fonction de la fenêtre
  • "clientY" : coordonnée verticale en pixels du curseur en fonction de la fenêtre
  • "viewportX" : coordonnée horizontale en pixels du curseur en fonction de la zone d'affichage
  • "viewportY" : coordonnée verticale en pixels du curseur en fonction de la zone d'affichage
(function(c, u, r, p, o, s) {
  u = c[u] = {};
  u[r] = 0;
  u[p] = 0;
  u[o] = 0;
  u[s] = 0;
  document.addEventListener('mousemove', function(e) {
    u[o] = e[r];
    u[s] = e[p];
    u[r] = e[r] + c.scrollX;
    u[p] = e[p] + c.scrollY;
  });
  c.addEventListener('scroll', function() {
    u[s] = u[o] + c.scrollX;
    u[p] = u[r] + c.scrollY;
  });
})(window, 'curPos', 'clientX', 'clientY', 'viewportX', 'viewportY');

Voici un exemple de récupération des coordonnées du curseur au clic dans la page :

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

  console.log({
    "Coordonnée horizontale dans la fenêtre": curPos.clientX,
    "Coordonnée verticale dans la fenêtre": curPos.clientY,
    "Coordonnée horizontale dans le document": curPos.viewportX,
    "Coordonnée verticale dans le document": curPos.viewportY
  });

});

Cet article vous a-t-il été utile ?

Super :)
Merci d'avoir donné votre avis !

Oups :(
Merci d'avoir donné votre avis qui va nous permettre de nous améliorer !

^