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

Document.onpointerlockerror - ポインターロックでエラーが起きた時に発火するイベント

onpointerlockerrorは、Documentのイベントです。ポインターロックでエラーが起きた時にpointerlockerrorイベントが発生し、ここに設定したコールバック関数が呼び出されます。

概要

名前
onpointerlockerror
所属
Document
イベント
pointerlockerror
IDL
attribute EventHandler onpointerlockerror;

typedef EventHandlerNonNull? EventHandler;

callback EventHandlerNonNull = any (Event event);
仕様書
https://w3c.github.io/pointerlock/#dom-document-onpointerlockerror

チュートリアル

onpointerlockerrorでイベントを設定する例です。

document.onpointerlockerror = function ( event ) {
	console.log( event ) ;
}

Event.addEventListener()でも、同様にイベントを設定できます。

document.addEventListener( "pointerlockerror", function ( event ) {
	console.log( event ) ;
} ) ;

デモ

Document.onpointerlockerrorのデモです。ポインターロックに失敗するごとにイベントが発生し、その回数を出力します。茶色い部分でクリックすると、ポインターロックを開始し、もう一度クリックすると終了します。このデモのiframe要素には、"allow-pointer-lock"がないsandbox属性を付けているため、ポインターロックを実行しようとすると拒否され、エラーが発生します。ページを新しいウィンドウで開けば拒否されません。

<!DOCTYPE html>
<body>
	<canvas width="200" height="200"></canvas>
<hr>
	<div id="result">0</div>
<script>
// イベント
var number = 0 ;

document.onpointerlockerror = document.onmozpointerlockerror = function ( event ) {
	console.log( event ) ;
	document.getElementById( "result" ).textContent = ++number ;
}

var
	canvas = document.getElementsByTagName( "canvas" )[0] ,
	context = canvas.getContext( "2d" ) ;

var
	start = function() {
		canvas.requestPointerLock() ;
	} ,
	end = function () {
		document.exitPointerLock() ;
	} ,
	startOrEnd = function () {
		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日 (金)
コンテンツを公開しました。