マウスポインタの座標を取得する - JavaScript
JavaScriptでマウスポインタの位置、座標を取得するコードを紹介します。
概要
JavaScriptでマウスポインタの座標を取得するには、onmousemoveイベントを利用します。
onmousemoveイベントに関連付けられた、イベントハンドラ関数の第一引数に、イベント情報が格納されています。ポインタのクライアント座標値は、clientX, clientYプロパティに格納されています。また、スクリーン座標値は screenX, screenY プロパティに格納されています。
書式
クライアントX座標
クライアントY座標
スクリーンX座標
スクリーンY座標
プログラム
コード
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
function init() {
window.onmousemove = handleMouseMove;
function handleMouseMove(event) {
event = event || window.event; // IE対応
target = document.getElementById("output_client");
target.innerHTML = "Client X:" + event.clientX + ", Client Y:" + event.clientY;
target = document.getElementById("output_screen");
target.innerHTML = "Screen X:" + event.screenX + ", Screen Y:" + event.screenY;
}
}
</script>
</head>
<body onload="init();">
<div id="output_client"></div>
<div id="output_screen"></div>
</body>
</html>
解説
bodyタグのonload属性の記述により、ページ表示時にinit()関数が実行されます。
init関数の下記コードにより、onmouseoverイベントにhandleMouseMove関数をイベントハンドラとして設定します。
window.onmousemove = handleMouseMove;
onmouseoverイベントのイベントハンドラの引数の clientX, clientY にクライアント座標系での、X,Y座標が設定されています。また、screenX, screenY にスクリーン座標系での、X,Y座標が設定されています。これらの値を画面に表示します。
onmouseoverのイベントハンドラはマウスが移動するごとに呼び出されるため、マウスをブラウザのウィンドウ内で移動させるとすぐに座標値の表示が画面に反映されます。
function handleMouseMove(event) {
event = event || window.event; // IE対応
target = document.getElementById("output_client");
target.innerHTML = "Client X:" + event.clientX + ", Client Y:" + event.clientY;
target = document.getElementById("output_screen");
target.innerHTML = "Screen X:" + event.screenX + ", Screen Y:" + event.screenY;
}
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
Webブラウザーのウィンドウ内にマウスポインタを移動させます。
ウィンドウ内にマウスポインタが入ると、マウスポインタのクライアント座標系でのX,Y座標値と、スクリーン座標系でのX,Yの座標値が表示されます。
マウスポインタをページの左上の位置に移動します。Client X, Client Y の値が両方0になります。Screenの値はディスプレイ上でのX,Y座標となります。
マウスポインタを移動すると座標値も増減します。
補足
下記のコードでも動作は同じになります。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
function init()
{
window.onmousemove = handleMouseMove;
}
function handleMouseMove(event) {
event = event || window.event; // IE対応
target = document.getElementById("output_client");
target.innerHTML = "Client X:" + event.clientX + ", Client Y:" + event.clientY;
target = document.getElementById("output_screen");
target.innerHTML = "Screen X:" + event.screenX + ", Screen Y:" + event.screenY;
}
</script>
</head>
<body onload="init();">
<div id="output_client" ></div>
<div id="output_screen"></div>
</body>
</html>
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
掲載日: 2015-10-07
改訂日: 2023-04-12
