ホーム » JavaScript DOM » JavaScript マウスイベント

JavaScript マウスイベント

概要: このチュートリアルでは、JavaScriptにおける基本的なマウスイベントとそのプロパティについて学習します。

JavaScript マウスイベント入門

マウスイベントは、ページ上の要素と対話するためにマウスを使用すると発生します。DOMレベル3イベントは9つのマウスイベントを定義しています。

mousedown、mouseup、およびclickイベント

要素をclickすると、次の順序で少なくとも3つのマウスイベントが発生します。

  1. mousedownは、要素上でマウスボタンを押したときに発生します。
  2. mouseupは、要素上でマウスボタンを離したときに発生します。
  3. clickは、要素上で1つのmousedownと1つのmouseupが検出されたときに発生します。
JavaScript mouse event - click event

要素上でマウスボタンを押して、マウスカーソルを要素の外に移動し、その後マウスボタンを離した場合、要素上ではmousedownイベントのみが発生します。

同様に、マウスボタンを押して、マウスを要素の上に移動し、マウスボタンを離した場合、要素上ではmouseupイベントのみが発生します。

どちらの場合も、clickイベントは発生しません。

dblclickイベント

実際には、dblclickイベントを使用することはめったにありません。dblclickイベントは、要素をダブルクリックしたときに発生します。

dblclickイベントが発生するには、2つのクリックイベントが必要です。dblclickイベントは、次の順序で4つの異なるイベントが発生します。

  1.  mousedown
  2.  mouseup
  3.  click
  4.  mousedown
  5.  mouseup
  6.  click
  7.  dblclick
JavaScript mouse event - dblclick event

図は、clickイベントが常にdblclickイベントの前に発生することを示しています。

同じ要素にclickとdblclickの両方のイベントハンドラーを登録した場合、ユーザーが要素をクリックしたのかダブルクリックしたのかを知ることはできません。

mousemove

mousemoveイベントは、要素の周囲でマウスカーソルを移動するたびに繰り返し発生します。このmousemoveイベントは、マウスが1ピクセルでも移動すると、1秒間に何度も発生します。イベントハンドラー関数が複雑な場合、パフォーマンスの問題につながる可能性があります。

パフォーマンスの問題を回避するには、必要な場合にのみmousemoveイベントハンドラーを追加し、不要になったらすぐに削除するのが良い方法です。

element.onmousemove = mouseMoveEventHandler;
// ...
//  later, no longer use
element.onmousemove = null;Code language: JavaScript (javascript)

mouseover / mouseout

mouseoverは、マウスカーソルが要素の外側にあり、要素の境界内に移動したときに発生します。

mouseoutは、マウスカーソルが要素の上にあり、別の要素に移動したときに発生します。

mouseenter / mouseleave

mouseenterは、マウスカーソルが要素の外側にあり、要素の境界内に移動したときに発生します。

mouseleaveは、マウスカーソルが要素の上にあり、要素の境界の外に移動したときに発生します。

mouseenterとmouseleaveはどちらもバブリングせず、マウスカーソルが子要素の上に移動しても発生しません。

マウスイベントハンドラーの登録

マウスイベントを登録するには、次の手順を使用します。

  • まず、querySelector()またはgetElementById()メソッドを使用して要素を選択します。
  • 次に、addEventListener()メソッドを使用してマウスイベントを登録します。

たとえば、次のボタンがあるとします。

<button id="btn">Click Me!</button>Code language: HTML, XML (xml)

マウスクリックイベントハンドラーを登録するには、次のコードを使用します。

let btn = document.querySelector('#btn');

btn.addEventListener('click',(event) => {
    console.log('clicked');
});Code language: JavaScript (javascript)

または、要素のプロパティにマウスイベントハンドラーを割り当てることができます。

let btn = document.querySelector('#btn');

btn.onclick = (event) => {
    console.log('clicked');
};Code language: JavaScript (javascript)

レガシーシステムでは、イベントハンドラーが要素のHTML属性に割り当てられている場合があります。

<button id="btn" onclick="console.log('clicked')">Click Me!</button>Code language: HTML, XML (xml)

マウスイベントハンドラーを登録するには、addEventListener()を使用するのが良い方法です。

マウスボタンの検出

マウスイベントハンドラーに渡されるeventオブジェクトには、イベントをトリガーするためにマウスで押されたマウスボタンを示すbuttonというプロパティがあります。

マウスボタンは数値で表されます。

  • 0: メインマウスボタン（通常は左ボタン）が押されています。
  • 1: 補助ボタン（通常は中央ボタンまたはホイールボタン）が押されています。
  • 2: セカンダリボタン（通常は右ボタン）が押されています。
  • 3: 4番目のボタン（通常はブラウザの戻るボタン）が押されています。
  • 4: 5番目のボタン（通常はブラウザの進むボタン）が押されています。
javascript mouse event - mouse buttons

次の例を参照してください。

<!DOCTYPE html>
<html>
<head>
    <title>JS Mouse Events - Button Demo</title>
</head>
<body>
    <button id="btn">Click me with any mouse button: left, right, middle, ...</button>
    <p id="message"></p>
    <script>
        let btn = document.querySelector('#btn');

        // disable context menu when right-mouse clicked
        btn.addEventListener('contextmenu', (e) => {
            e.preventDefault();
        });

        // show the mouse event message
        btn.addEventListener('mouseup', (e) => {
            let msg = document.querySelector('#message');
            switch (e.button) {
                case 0:
                    msg.textContent = 'Left mouse button clicked.';
                    break;
                case 1:
                    msg.textContent = 'Middle mouse button clicked.';
                    break;
                case 2:
                    msg.textContent = 'Right mouse button clicked.';
                    break;
                default:
                    msg.textContent = `Unknown mouse button code: ${event.button}`;
            }
        });
    </script>
</body>
</html>
Code language: HTML, XML (xml)

この例では、マウスでボタンをクリックすると（左クリック、右クリック、中央クリック）、対応するメッセージが<div>要素に表示されます。

修飾キー

要素をクリックするとき、Shift、Ctrl、Alt、Metaの1つ以上の修飾キーを押す場合があります。

Metaキーは、WindowsキーボードではWindowsキー、AppleキーボードではCommandキーです。

これらの修飾キーが押されたかどうかを検出するには、マウスイベントハンドラーに渡されるeventオブジェクトを使用できます。

eventオブジェクトには4つのブール型のプロパティがあり、キーが押されている場合はtrue、押されていない場合はfalseに設定されます。

次の例を参照してください。

<!DOCTYPE html>
<html>
<head>
    <title>JS Modifier Keys Demo</title>
</head>
<body>
    <button id="btnKeys">Click me with Alt, Shift, Ctrl pressed</button>
    <p id="messageKeys"></p>

    <script>
        let btnKeys = document.querySelector('#btnKeys');

        btnKeys.addEventListener('click', (e) => {
            let keys = [];

            if (e.shiftKey) keys.push('shift');
            if (e.ctrlKey) keys.push('ctrl');
            if (e.altKey) keys.push('alt');
            if (e.metaKey) keys.push('meta');

            let msg = document.querySelector('#messageKeys');
            msg.textContent = `Keys: ${keys.join('+')}`;
        });
    </script>
</body>
</html>Code language: HTML, XML (xml)

画面座標の取得

マウスイベントハンドラーに渡されるイベントのscreenXプロパティとscreenYプロパティは、画面全体に対するマウスの位置の画面座標を返します。

JavaScript mouse event -screenX screenY

一方、clientXプロパティとclientYプロパティは、マウスイベントが発生したアプリケーションのクライアント領域内の水平座標と垂直座標を提供します。

次のデモを参照してください。

<!DOCTYPE html>
<html>
<head>
    <title>JS Mouse Location Demo</title>
    <style>
        #track {
            background-color: goldenrod;
            height: 200px;
            width: 400px;
        }
    </style>
</head>
<body>
    <p>Move your mouse to see its location.</p>
    <div id="track"></div>
    <p id="log"></p>

    <script>
        let track = document.querySelector('#track');
        track.addEventListener('mousemove', (e) => {
            let log = document.querySelector('#log');
            log.innerText = `
            Screen X/Y: (${e.screenX}, ${e.screenY})
            Client X/Y: (${e.clientX}, ${e.clientY})`
        });
    </script>
</body>
</html>Code language: HTML, XML (xml)

まとめ

  • DOMレベル3は9つのマウスイベントを定義しています。
  • マウスイベントハンドラーを登録するには、addEventListener()メソッドを使用します。
  • event.buttonは、マウスイベントをトリガーするために押されたマウスボタンを示します。
  • 修飾キー：alt、shift、ctrl、meta（Mac）は、マウスイベントハンドラーに渡されるイベントオブジェクトのプロパティを介して取得できます。
  • screenXプロパティとscreenYプロパティは、マウスポインタの画面座標における水平座標と垂直座標を返します。
  • eventオブジェクトのclientXプロパティとclientYプロパティは、マウスイベントが発生したアプリケーションのクライアント領域内の水平座標と垂直座標を返します。

クイズ

このチュートリアルは役に立ちましたか？
JavaScript beforeunload Event
前へ
JavaScript beforeunload イベント
次へ
JavaScript キーボードイベント
JavaScript Keyboard Events