SYNCERのロゴ
アイキャッチ画像

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>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
確認中確認中確認中確認中確認中確認中確認中確認中
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月6日 (金)
コンテンツを公開しました。