マウスイベントとキーボードの修飾について

前回は、マウスイベントについての投稿をしましたが、
サンプルではマウスイベントのみを試してみました。

実際のアプリケーションではマウスイベントと同時に、キーボードの修飾キーを組み合わせて
アプリケーションの挙動を変えるシーンがあります。

修飾キーは「Ctrlキー」「Shiftキー」「Altキー」「メタキー」あります。
メタキーは、windowsでいうとウィンドウズキー、macでいうとコマンドキーです。

具体的にマウスイベントと修飾キーの組み合わせをどのように書くのか、試してみます。
下記のHTMLを用意しました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>

<body>

<div id="test1" style="width: 1000px; height: 900px;">
	<div style="position:fixed; top:10px;">

		<div>clientX ：<span id="client_x"></span></div>
		<div>clientY ：<span id="client_y"></span></div>
		<div>screenX：<span id="screen_x"></span></div>
		<div>screenY：<span id="screen_y"></span></div>
		<div>pageX：<span id="page_x"></span></div>
		<div>pageY：<span id="page_y"></span></div>
		<div>offsetX：<span id="offset_x"></span></div>
		<div>offsetY：<span id="offset_y"></span></div>

		修飾キー
		<div>Ctrl：<span id="ctrl"></span></div>
		<div>Shift：<span id="shift"></span></div>
		<div>Alt：<span id="alt"></span></div>
		<div>Meta：<span id="meta"></span></div>

	</div>
</div>

<script type="text/javascript">

	let element_test1 = document.getElementById("test1");

	element_test1.onmousemove = function(event) {

		// イベントオブジェクトから座標を取得
		let client_x = event.clientX;
		let client_y = event.clientY;
		let screen_x = event.screenX;
		let screen_y = event.screenY;
		let page_x = event.pageX;
		let page_y = event.pageY;
		let offset_x = event.offsetX;
		let offset_y = event.offsetY;

		// キー情報を取得する
		let ctrl = event.ctrlKey;
		let shift = event.shiftKey;
		let alt = event.altKey;
		let meta = event.metaKey;

		// x座標出力用の要素を取得
		let ele_client_x = document.getElementById("client_x");
		let ele_client_y = document.getElementById("client_y");
		let ele_screen_x = document.getElementById("screen_x");
		let ele_screen_y = document.getElementById("screen_y");
		let ele_page_x = document.getElementById("page_x");
		let ele_page_y = document.getElementById("page_y");
		let ele_offset_x = document.getElementById("offset_x");
		let ele_offset_y = document.getElementById("offset_y");

		let ele_ctrl = document.getElementById("ctrl");
		let ele_shift = document.getElementById("shift");
		let ele_alt = document.getElementById("alt");
		let ele_meta = document.getElementById("meta");

		// 要素を更新する
		ele_client_x.innerHTML = client_x;
		ele_client_y.innerHTML = client_y;
		ele_screen_x.innerHTML = screen_x;
		ele_screen_y.innerHTML = screen_y;
		ele_page_x.innerHTML = page_x;
		ele_page_y.innerHTML = page_y;
		ele_offset_x.innerHTML = offset_x;
		ele_offset_y.innerHTML = offset_y;

		// キー情報を表示する
		ele_ctrl.innerHTML = ctrl;
		ele_shift.innerHTML = shift;
		ele_alt.innerHTML = alt;
		ele_meta.innerHTML = meta;

	};

</script>

</body>
</html>

サーバ上のHTMLはこちら(test1.html)

画面にアクセスして、マウスイベントが発生した際に、
キーボードの「Ctrlキー」「Shiftキー」「Altキー」「メタキー」を押すと修飾キーの
画面上に「true」と表示されます。(何も押していないキーについてはfalse表示されます)

Ctrlキーを押した状態の出力 (Firefoxの表示)