Document: pointerLockElement プロパティ

利用可能性は限定的

この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。

Want more support for this feature? Tell us why.

もっと詳しく
完全な互換性情報を見る

pointerLockElement は Document インターフェイスの読み取り専用プロパティで、この要素をポインターがロックされている間のマウスイベントの対象として設定します。ロック待ち状態の場合、ポインターがロックされていない場合、対象が他の文書にある場合は null になります。

値

Element または null。

例

ポインターロック状態をチェック

この例には <div> 要素があり、その中に <button> があります。ボタンをクリックすると <div> のポインターロックをリクエストします。

この例では pointerlockchange イベントも待ち受けます。このイベントが発行されると、イベントハンドラーは文書内の要素がポインターロックを保有している場合は "Lock" ボタンを無効化し、そうでない場合はボタンを有効化します。

この例では、"Lock" ボタンをクリックするとポインターがロックされ、ボタンは無効になります。(例えば Escape キーを押して)ポインターロックを解除すると、ボタンは再び有効になります。

HTML

html

<div id="container">
 <button id="lock">Lock</button>
</div>

CSS

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);
});