Document : propriété pointerLockElement
Limited availability
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
La propriété en lecture seule pointerLockElement de l'interface Document fournit l'élément défini comme cible des évènements souris lorsque le pointeur est verrouillé.
Elle vaut null si le verrouillage est en attente, si le pointeur n'est pas verrouillé ou si la cible se trouve dans un autre document.
Valeur
Un objet Element ou null.
Exemples
Vérifier l'état du verrouillage du pointeur
Cet exemple contient un élément HTML <div> qui contient à son tour un <button>. Cliquer sur le bouton demande le verrouillage du pointeur pour le <div>.
L'exemple écoute aussi l'évènement pointerlockchange : lorsque cet évènement est déclenché, le gestionnaire d'évènements désactive le bouton « Verrouiller » si un élément du document possède le verrouillage du pointeur, et active le bouton sinon.
L'effet est que si vous cliquez sur le bouton « Verrouiller », le pointeur est verrouillé et le bouton est désactivé : si vous quittez ensuite le verrouillage du pointeur (par exemple, en appuyant sur la touche Échap), le bouton est réactivé.
HTML
<div id="container">
<button id="lock">Verrouiller</button>
</div>
CSS
div {
height: 100px;
width: 200px;
border: 2px solid blue;
}
JavaScript
const lock = document.querySelector("#lock");
const container = document.querySelector("#container");
lock.addEventListener("click", () => {
container.requestPointerLock();
});
document.addEventListener("pointerlockchange", () => {
const locked = document.pointerLockElement;
lock.disabled = Boolean(locked);
});
Résultat
Spécifications
| Specification |
|---|
| Pointer Lock 2.0 # dom-documentorshadowroot-pointerlockelement |
Compatibilité des navigateurs
Voir aussi
- La méthode
Document.exitPointerLock() - La méthode
Element.requestPointerLock() - L'API Pointer Lock