HTML DOM MouseEventのoffsetYプロパティとは？使い方とサンプルコードを解説
offsetYプロパティとは
HTML DOM の MouseEvent offsetY プロパティは、マウスイベントが発生した際に、イベントのターゲット要素を基準としたマウスポインタの垂直方向（Y軸）の座標をピクセル単位で返します。
水平方向（X軸）の座標も同時に取得したい場合は、offsetX プロパティと組み合わせて使用します。
このプロパティは読み取り専用であり、ターゲット要素のパディング領域を含む左上隅を原点（0, 0）として座標が計算される点に注意してください。
構文
offsetY の値を参照するための基本的な構文は以下のとおりです。
MouseEventObject.offsetY
サンプルコード
それでは、MouseEvent offsetY プロパティを使用した具体的な例を見てみましょう。このデモでは、緑色の「安全エリア」の中でカーソルを動かすシンプルなゲーム形式を採用しています。中央のゴール地点に到達できれば成功、赤色の「危険エリア」に触れると失敗となる仕組みです。
<!DOCTYPE html>
<html>
<head>
<title>MouseEvent offsetY</title>
<style>
* {
padding: 2px;
margin:5px;
}
form {
width:70%;
margin: 0 auto;
text-align: center;
}
#outer {
width:70%;
margin: 0 auto;
padding: 0;
text-align: center;
border:1px solid black;
height: 105px;
background-color: #28a745;
}
input[type="button"] {
border-radius: 10px;
}
#upper {
border-bottom: 1px solid black;
height: 40px;
margin: 0 0 15px 0;
background-color: #DC3545;
}
#lower {
border-top: 1px solid black;
height: 40px;
margin: 15px 0 0 0;
background-color: #DC3545;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>MouseEvent-offsetY</legend>
<div id="outer">
<div id="upper"><h2>Danger</h2></div>
<div id="lower"><h2>Danger</h2></div>
</div>
<input type="button" id="start" value="Start" onclick="gameStart()">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById('divDisplay');
var gameDisplay = document.getElementById('outer');
function playGame(event) {
var x = event.offsetX;
var y = event.offsetY;
if(y > 45 && y < 60){
divDisplay.textContent = 'Keep Going!';
if(x === 272){
divDisplay.textContent = 'Congrats! You Did it!';
gameDisplay.removeEventListener('mousemove', playGame);
}
}
else{
divDisplay.textContent = 'You moved to DANGER area. You loose!';
gameDisplay.removeEventListener('mousemove', playGame);
}
}
function gameStart(){
gameDisplay.addEventListener('mousemove',playGame);
}
</script>
</body>
</html>
コードの解説
- gameStart()：「Start」ボタンがクリックされると、outer 要素に対して mousemove イベントリスナーを登録します。
- playGame()：event.offsetX と event.offsetY でカーソルの現在位置を取得し、条件分岐によって判定を行います。
- Y座標が 45〜60 の範囲内（安全レーン）であれば「Keep Going!」と表示され、さらに X座標が 272 に達すると「Congrats! You Did it!」と表示されてクリアとなります。
- 危険エリアに移動すると「You moved to DANGER area. You loose!」と表示され、removeEventListener() によってイベント監視が解除され、ゲームが終了します。
実行結果
Start ボタンをクリックし、カーソルが緑色（安全）エリア内にある場合：
Start ボタンをクリックし、カーソルが緑色（安全）エリアの終端に達した場合：
Start ボタンをクリックし、カーソルが赤色（危険）エリア内にある場合：
関連する座標プロパティとの違い
マウスイベントには offsetY 以外にも複数の座標系プロパティが存在します。それぞれ基準点が異なるため、用途に応じて使い分けることが重要です。
| プロパティ | 座標の基準点 |
|---|---|
| offsetX / offsetY | ターゲット要素の左上 |
| clientX / clientY | ブラウザのビューポート（表示領域）の左上 |
| pageX / pageY | ドキュメント全体の左上（スクロール量を含む） |
| screenX / screenY | モニター画面の左上 |
-
HTML DOMのMouseEvent offsetXプロパティとは？マウス座標の取得方法を解説
MouseEvent offsetXプロパティとはHTML DOMのMouseEvent offsetXプロパティは、マウスイベントが発生した際に、ターゲット要素を基準としたマウスポインタの水平方向（X軸）の座標を返します。垂直方向（Y軸）の座標を取得したい場合は、offsetYプロパティと組み合わせて使用します。これらのプロパティを活用することで、要素内でのマウスの正確な位置を把握でき、ドラッグ＆ドロップ操作やゲーム、カスタムカーソル追従機能など、さまざまなインタラクティブなWebアプリケーションの実装に役立ちます。構文（シンタックス）offsetXプロパティの値を参照する基本的な構文は以下
-
HTML DOM MouseEvent clientYプロパティとは？マウスのY座標を取得する方法を解説
MouseEvent の clientY プロパティは、マウスイベントが発生した際のマウスポインタの縦方向（Y）の座標値を返します。clientX プロパティと組み合わせることで、横方向（X）の座標も同時に取得できます。これらの座標は、ブラウザの表示領域（ビューポート）の左上隅を原点（0,0）とした相対位置で表されます。そのため、画面上でカーソルが現在どの位置にあるのかを正確に把握したい場面、例えばドラッグ＆ドロップの実装やミニゲームの作成などで活躍します。構文clientY の値を参照する基本的な構文は以下の通りです。MouseEventObject.clientY戻り値はピクセル単位の数値