HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM MouseEvent（マウスイベント）オブジェクトとは？主要プロパティ・イベント一覧と実装例を解説

MouseEventオブジェクトとは

HTML DOMのMouseEvent（マウスイベント）オブジェクトは、ユーザーがマウスを使ってHTMLドキュメント上の要素とやり取りした際に発生するイベントを表すオブジェクトです。クリックや移動など、マウスに関するあらゆる操作を検出し、その詳細な情報（座標、押されたボタン、修飾キーの状態など）を取得することができます。

MouseEventオブジェクトには、以下のようなプロパティやメソッドが用意されています。

MouseEventの主なプロパティ・メソッド一覧

プロパティ／メソッド説明
altKeyマウスイベント発生時に、キーボードの「ALT」キーが押されていたかどうかを真偽値で返します。
buttonマウスイベント発生時に押されたマウスボタンに対応する数値を返します。
buttonsマウスイベント発生時に押されていたマウスボタン（複数可）を返します。
clientXマウスイベント発生時のマウスポインタの横方向（X）座標を、現在のウィンドウ（ビューポート）基準で返します。
clientYマウスイベント発生時のマウスポインタの縦方向（Y）座標を、現在のウィンドウ（ビューポート）基準で返します。
ctrlKeyマウスイベント発生時に、キーボードの「CTRL」キーが押されていたかどうかを返します。
getModifierState()指定されたキーが有効（押されている）場合はtrue、そうでない場合はfalseを返します。
metaKeyイベント発生時に「META」キー（WindowsキーやCommandキー）が押されていたかどうかを返します。
movementX直前のmousemoveイベントの位置を基準とした、マウスポインタの相対的な横方向（X）座標を返します。
movementY直前のmousemoveイベントの位置を基準とした、マウスポインタの相対的な縦方向（Y）座標を返します。
offsetX対象要素の左端を基準とした、マウスポインタの相対的な横方向（X）座標を返します。
offsetY対象要素の上端を基準とした、マウスポインタの相対的な縦方向（Y）座標を返します。
pageXマウスイベント発生時のマウスポインタの横方向（X）座標を、ドキュメント全体基準で返します。
pageYマウスイベント発生時のマウスポインタの縦方向（Y）座標を、ドキュメント全体基準で返します。
relatedTargetマウスイベントに関連するHTML要素を返します。
screenXイベント発生時のマウスポインタの横方向（X）座標を、スクリーン（画面）基準で返します。
screenYイベント発生時のマウスポインタの縦方向（Y）座標を、スクリーン（画面）基準で返します。
shiftKeyイベント発生時にキーボードの「SHIFT」キーが押されていたかどうかを返します。
whichマウスイベント発生時に押されたマウスボタンを返します。

実装例：clientXプロパティの使い方

ここでは、MouseEventのclientXプロパティを使用した具体例を見てみましょう。このサンプルでは、緑色の「安全エリア」内でマウスを動かし、指定した位置に到達すると成功、赤色の「危険エリア」に入ると失敗というシンプルなミニゲーム形式です。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<title>MouseEvent clientX</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-clientX</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.clientX;
        var y = event.clientY;
            if(y > 95 &amp;&amp; y < 110){
                divDisplay.textContent = 'Keep Going!';
                    if(x === 439){
                        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>

実行結果

「Start」ボタンをクリックし、カーソルが緑色（安全）エリアにある場合：

HTML DOM MouseEvent（マウスイベント）オブジェクトとは？主要プロパティ・イベント一覧と実装例を解説

「Start」ボタンをクリックし、カーソルが緑色（安全）エリアの終端に達した場合：

HTML DOM MouseEvent（マウスイベント）オブジェクトとは？主要プロパティ・イベント一覧と実装例を解説

「Start」ボタンをクリックし、カーソルが赤色（危険）エリアに入った場合：

HTML DOM MouseEvent（マウスイベント）オブジェクトとは？主要プロパティ・イベント一覧と実装例を解説

MouseEventで扱えるイベントの種類

また、MouseEventオブジェクトでは以下のようなイベントを扱うことができます。

イベント説明
onclickユーザーが要素をクリックしたときに発生します。
oncontextmenuユーザーが要素を右クリックしてコンテキストメニューを開こうとしたときに発生します。
ondblclickユーザーが要素をダブルクリックしたときに発生します。
onmousedown要素の上でマウスボタンを押したときに発生します。
onmouseenterポインタが要素に乗ったときに発生します。
onmouseleaveポインタが要素から離れたときに発生します。
onmousemoveポインタが要素上で移動している間に発生します。
onmouseoutユーザーがマウスポインタを要素、またはその子要素から外に出したときに発生します。
onmouseoverポインタが要素、またはその子要素に乗ったときに発生します。
onmouseup要素の上でマウスボタンを離したときに発生します。

実装例：onmouseoutイベントの使い方

次に、MouseEventのonmouseoutイベントを使用した例を見てみましょう。このサンプルでは、relatedTargetプロパティと組み合わせることで、マウスがどの要素から離れたのかを判定して表示しています。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<title>MouseEvent onmouseout</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-onmouseout</legend>
            <div id="outer" onmouseout="gameStart(event)">
            <div id="upper"><h2>Danger</h2></div>
            <div id="lower"><h2>Danger</h2></div>
            </div>
            <div id="divDisplay"></div>
            </fieldset></form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var textSelect = document.getElementById("textSelect");
    function gameStart(event) {
        var fetchedID = event.relatedTarget.id
            if(fetchedID !== '')
                divDisplay.textContent = 'You are hovering over '+fetchedID+' <div> element';
        }
</script>
</body>
</html>

実行結果

緑色（安全）エリア上にカーソルがある場合：

HTML DOM MouseEvent（マウスイベント）オブジェクトとは？主要プロパティ・イベント一覧と実装例を解説

上部の赤色（危険）エリア上にカーソルがある場合：

HTML DOM MouseEvent（マウスイベント）オブジェクトとは？主要プロパティ・イベント一覧と実装例を解説

下部の赤色（危険）エリア上にカーソルがある場合：

HTML DOM MouseEvent（マウスイベント）オブジェクトとは？主要プロパティ・イベント一覧と実装例を解説

まとめ

MouseEventオブジェクトを活用することで、マウス操作によるリッチなインタラクションをWebページに簡単に実装できます。clientX/clientYなどの座標系プロパティは用途に応じて基準が異なるため、それぞれの違いを理解して適切に使い分けることが重要です。

  1. HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説

    HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注

  2. 【初心者向け】HTML DOM Videoオブジェクトとは？主要プロパティ・メソッドをサンプルコード付きで解説

    HTML DOM の Video オブジェクトは、HTML の <video> 要素を JavaScript から操作するためのインターフェースです。この記事では、Video オブジェクトの生成方法、利用できるプロパティやメソッドの一覧、そして実際に動くサンプルコードを交えてわかりやすく解説します。 Videoオブジェクトの作成方法 <video> 要素は、JavaScript の createElement() メソッドを使って動的に生成できます。 var videoObject = document.createElement(VIDEO) こうして作成した vi