Document: pointerLockElement プロパティ
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
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
js
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);
});
結果
仕様書
Specification |
---|
Pointer Lock 2.0 # dom-documentorshadowroot-pointerlockelement |
ブラウザーの互換性
BCD tables only load in the browser