https://idea-hack.com/courses/lets-understand-various-events-that-are-used-to-implement-processing-according-to-the-users-operation-in-javascript/lessons/perform-processing-when-the-mouse-is-pressed-or-moved-with-javascript/
https://idea-hack.com/courses/lets-understand-various-events-that-are-used-to-implement-processing-according-to-the-users-operation-in-javascript/lessons/perform-processing-when-the-mouse-is-pressed-or-moved-with-javascript/

JavaScriptでマウスを押したときや動かした時に処理を実行mousedown・mouseup・mousemoveイベントの使い方

マウス関連イベントの使い方

マウスの動作に応じて処理を追加するためにはmousedownmouseupmousemoveイベントを使います。

マウスの動きに合わせて要素を移動させるといった場合、clickイベントだけでは実装できません。マウスインタラクションを実装するにはこれら3つのイベントを利用します。

イベント

イベント発生条件
mousedownマウスボタンを押す
mouseupマウスボタンを離す
mousemoveマウスを動かす
マウス関連のイベント

サンプルコード

サンプルコードとして、マウスイベントに応じて文字列を出力するサンプルコードを紹介します。

Output

現在のマウスインタラクションの状態

Pug
p 現在のマウスインタラクションの状態
 #targetText
JavaScript
// 操作対象エリア
const targetText = document.getElementById('targetText');

// 対象エリア上でマウスボタンを押したら、ログを出力
window.addEventListener('mousedown', () => {
  targetText.textContent = `マウスボタンを押しています`;
});

// 対象エリア上でマウスボタンを離したら、ログを出力
window.addEventListener('mouseup', () => {
  targetText.textContent = `マウスボタンを離しました`;
});

// 対象エリア上でマウスを移動したら、ログを出力
window.addEventListener('mousemove', () => {
  targetText.textContent = `マウスを移動しました`;
});
インストラクター
コメント

コメントを残す