Bien que la cursor: nonesolution CSS soit définitivement une solution de contournement solide et facile , si votre objectif réel est de supprimer le curseur par défaut pendant que votre application Web est utilisée, ou d'implémenter votre propre interprétation du mouvement brut de la souris (pour les jeux FPS, par exemple), vous pouvez souhaitez plutôt envisager d'utiliser l' API Pointer Lock .
Vous pouvez utiliser requestPointerLock sur un élément pour supprimer le curseur et rediriger tous les mousemoveévénements vers cet élément (que vous pouvez ou non gérer):
document.body.requestPointerLock();
Pour libérer le verrou, vous pouvez utiliser exitPointerLock :
document.exitPointerLock();
Notes complémentaires
Pas de curseur, pour de vrai
Il s'agit d'un appel API très puissant. Il rend non seulement votre curseur invisible, mais il supprime en fait le curseur natif de votre système d'exploitation . Vous ne pourrez pas sélectionner de texte ni faire quoi que ce soit avec votre souris (sauf en écoutant certains événements de souris dans votre code) tant que le verrouillage du pointeur ne sera pas libéré (soit en utilisantexitPointerLock ou en appuyant sur ESCdans certains navigateurs).
Autrement dit, vous ne pouvez pas quitter la fenêtre avec votre curseur pour qu'elle s'affiche à nouveau, car il n'y a pas de curseur.
Restrictions
Comme mentionné ci-dessus, il s'agit d'un appel d'API très puissant, et il n'est donc permis de faire qu'en réponse à une interaction directe de l'utilisateur sur le Web, comme un clic; par exemple:
document.addEventListener("click", function () {
document.body.requestPointerLock();
});
De plus, requestPointerLockne fonctionnera pas à partir d'un bac iframeà sable sauf si leallow-pointer-lock autorisation est définie.
Notifications utilisateur
Certains navigateurs demanderont à l'utilisateur une confirmation avant que le verrouillage ne soit engagé, d'autres afficheront simplement un message. Cela signifie que le verrouillage du pointeur peut ne pas s'activer immédiatement après l'appel. Cependant, l'activation réelle du verrouillage du pointeur peut être écoutée en écoutant l' pointerchangeévénement sur l'élément sur lequel a requestPointerLockété appelé:
document.body.addEventListener("pointerlockchange", function () {
if (document.pointerLockElement === document.body) {
// Pointer is now locked to <body>.
}
});
La plupart des navigateurs n'afficheront le message qu'une seule fois, mais Firefox spammera occasionnellement le message à chaque appel. AFAIK, cela ne peut être contourné que par les paramètres utilisateur, voir Désactiver la notification de verrouillage du pointeur dans Firefox .
Écouter les mouvements bruts de la souris
L'API Pointer Lock supprime non seulement la souris, mais redirige à la place les données brutes de mouvement de la souris vers l'élément requestPointerLockappelé. Cela peut être écouté simplement en utilisant l' mousemoveévénement, puis en accédant aux propriétés movementXet movementYde l'objet événement:
document.body.addEventListener("mousemove", function (e) {
console.log("Moved by " + e.movementX + ", " + e.movementY);
});