Document: pointerLockElement プロパティ

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
pointerLockElement

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報