Document.onpointerlockchange - ポインターロックの状態が変化した時に発火するイベント
onpointerlockchangeは、Documentのイベントです。ポインターロックの状態が変化した時にpointerlockchangeイベントが発生し、ここに設定したコールバック関数が呼び出されます。
概要
- 名前
- onpointerlockchange
- 所属
- Document
- イベント
- pointerlockchange
- IDL
attribute EventHandler onpointerlockchange; typedef EventHandlerNonNull? EventHandler; callback EventHandlerNonNull = any (Event event);
- 仕様書
- https://w3c.github.io/pointerlock/#dom-document-onpointerlockchange
説明
ポインターロックの状態が変化した時とは、具体的には、開始した時と終了した時です。
チュートリアル
onpointerlockchangeでイベントを設定する例です。
document.onpointerlockchange = function ( event ) {
console.log( event ) ;
}
Event.addEventListener()でも、同様にイベントを設定できます。
document.addEventListener( "pointerlockchange", function ( event ) {
console.log( event ) ;
} ) ;
デモ
Document.onpointerlockchangeのデモです。ポインターロックの状態が変化するごとにイベントが発生し、その回数を出力します。茶色い部分でクリックすると、ポインターロックを開始し、もう一度クリックすると終了します。
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<body>
<canvas width="200" height="200"></canvas>
<hr>
<div id="result">0</div>
<script>
// イベント
var number = 0 ;
var
canvas = document.getElementsByTagName( "canvas" )[0] ,
context = canvas.getContext( "2d" ) ;
var
start = function() {
canvas.requestPointerLock() ;
} ,
end = function () {
document.exitPointerLock() ;
} ,
startOrEnd = function ( event ) {
console.log( event ) ;
document.getElementById( "result" ).textContent = ++number ;
if ( document.pointerLockElement === canvas || document.mozPointerLockElement === canvas ) {
document.onmousemove = canvasUpdate ;
document.onclick = end ;
} else {
document.onmousemove = null ;
document.onclick = start ;
}
}
var
x = 0 ,
y = 0 ,
radius = 8 ,
canvasDraw = function () {
context.beginPath() ;
context.arc( x, y, radius, 0, (Math.PI / 180) * 360, true ) ;
context.fillStyle = "#D36015" ;
context.fillRect( 0, 0, canvas.width, canvas.height ) ;
context.fillStyle = "#2660a1" ;
context.fill() ;
} ,
canvasUpdate = function ( e ) {
x += e.movementX ;
y += e.movementY ;
var
xLimit = canvas.width + radius ,
yLimit = canvas.height + radius ;
if ( x > xLimit ) x = -radius ;
if ( y > yLimit ) y = -radius ;
if ( x < -radius ) x = xLimit ;
if ( y < -radius ) y = yLimit ;
canvasDraw() ;
}
canvas.requestPointerLock = canvas.requestPointerLock || canvas.webkitRequestPointerLock || canvas.mozRequestPointerLock ,
document.exitPointerLock = document.exitPointerLock || document.mozExitPointerLock ;
document.onpointerlockchange = document.onmozpointerlockchange = startOrEnd ;
document.onclick = start ;
canvasDraw() ;
</script>
</body>
</html>
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
確認中 | 確認中 | 確認中 | 確認中 | 確認中 | 確認中 | 確認中 | 確認中 |
関連記事
- MouseEvent.movementX
- movementXは、MouseEventのプロパティです。前回発生したイベントと今回発生したイベントとの間で、ポインタが水平方向に移動した距離を返します。mousemoveイベントで有効です。
- Document.readyState
- readyStateは、Documentのプロパティです。ドキュメントの読み込み状況を表す文字列を返します。
- Document.onpointerlockerror
- onpointerlockerrorは、Documentのイベントです。ポインターロックでエラーが起きた時にpointerlockerrorイベントが発生し、ここに設定したコールバック関数が呼び出されます。
- Document.onfullscreenchange
- onfullscreenchangeは、Documentのイベントです。フルスクリーンの状態が変化した時にfullscreenchangeイベントが発生し、ここに設定したコールバック関数が呼び出されます。