JavaScript 速習チュートリアル

JavaScript マウスイベント

1. マウスイベントの概要

マウスイベント（Mouse Events）は、ユーザーがマウスを介して操作を行った際に発生します。
主要なマウスイベントの例を以下に挙げます：

  • click
  • dblclick
  • mouseover / mouseout
  • mousemove
  • mousedown / mouseup

マウスイベントは、マウスクリック、スクロール、移動といったユーザーアクションに応答して特定の関数（ファンクション）をトリガーさせるために不可欠であり、インタラクティブなウェブページやアプリケーションを作成する核となります。

2. Mouseover と Mouseout

以下の例では、マウスの動きに応じて要素内のテキストを動的に変更する方法を示します。

コード例

<div id="box" style="width:200px;height:100px;padding:16px;border:1px solid #000;">
このボックスの上にマウスを移動させてください
</div>

<script>
// ボックス要素（エレメント）を取得
const box = document.getElementById("box");

// ボックスにmouseoverイベントをリッスンさせる
box.addEventListener("mouseover", function () {
  box.innerHTML = "マウスが乗っています！";
});

// ボックスにmouseoutイベントをリッスンさせる
box.addEventListener("mouseout", function () {
  box.innerHTML = "マウスが外れました！";
});
</script>

3. 一般的なマウスイベント

3.1 click

メインのマウスボタン（通常は左ボタン）を使用して、同一のエレメント上でmousedownとmouseupの両方のイベントが発生した後に発火します。

3.2 dblclick

同一のエレメント上で、素早く2回クリックが行われたときに発火します。

3.3 mousedown / mouseup

マウスボタンが押されたとき（mousedown）、または離されたとき（mouseup）に、それぞれのエレメント上で発火します。

3.4 mousemove

マウスポインターがエレメントの上を移動している間、継続的に発火します。カーソルの座標情報を提供します。

3.5 mouseover

ポインターがエレメント（またはその子要素）の上に移動したときに発火します。

3.6 mouseout

ポインターがエレメントから離れたときに発火します。

3.7 mouseenter

mouseoverと似ていますが、ポインターがエレメント自体に入ったときにのみ発火し、その子要素（デセンダント）では発火しません。CSSの :hover ビヘイビアに近い挙動を実装する際に適しています。

3.8 mouseleave

mouseoutと似ていますが、ポインターがエレメントから完全に離れたときにのみ発火します。mouseenterと同様、子要素の境界線には反応しないため、より直感的なUI制御が可能です。

3.9 contextmenu

ユーザーがコンテキストメニューを開こうとしたとき（通常は右クリック）に発火します。

3.10 wheel

マウスホイールが回転したときに発火します。一般的にスクロールやズーム機能の実装に使用されます。

3.11 ドラッグイベント (drag events)

ドラッグアンドドロップのインターフェースを実装するために使用される一連のイベント（dragstart, dragend, dragoverなど）です。

4. マウスの座標位置

MouseEvent インターフェースは、ポインターの座標や押されているマウスボタンの情報など、有用なプロパティを含む eventオブジェクト を提供します。

4.1 clientX と clientY の使用例

以下のコードは、ウィンドウ内でのマウスの動きを検知し、そのリアルタイムな座標を表示します。

<p id="demo">このウィンドウ内でマウスを動かしてください！</p>

<script>
// ドキュメント全体でmousemoveイベントをリッスン
document.addEventListener("mousemove", function (event) {
  // eventオブジェクトから座標プロパティを取得
  document.getElementById("demo").innerHTML =
  "X座標: " + event.clientX + " Y座標: " + event.clientY;
});
</script>