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

【初心者向け】HTMLのonmouseup属性でマウスボタンを離したときにスクリプトを実行する方法

HTML要素の上でマウスボタンを離した（放した）瞬間に、onmouseupイベントが発生します。このイベントを活用することで、「マウスボタンを離したタイミング」で任意のスクリプト（JavaScript）を実行できるようになります。

onmouseupイベントとは

onmouseupは、ユーザーが要素の上で押していたマウスボタンを離したときに発火するイベントハンドラです。通常は、マウスボタンを「押した」瞬間に発生するonmousedownイベントとセットで使用されます。

この2つを組み合わせることで、ボタンを押している間だけ見た目を変えたり、ドラッグ操作の開始・終了を検知したりと、よりインタラクティブなWebページを作成できます。

実装例（サンプルコード）

以下のコードでは、見出し要素（h3タグ）に対してonmousedown属性とonmouseup属性の両方を設定しています。マウスボタンを押すと文字色が黄色に変わり、ボタンを離すと青色に戻ります。

<!DOCTYPE html>
<html>
   <body>
      <h3 id = "myid" onmousedown = "mouseDown()" onmouseup = "mouseUp()">
         これはデモ用の見出しです。
      </h3>
      <p>上の見出しをクリックして、そのままボタンを離してください。</p>
      <script>
         function mouseDown() {
            document.getElementById("myid").style.color = "yellow";
         }
         function mouseUp() {
            document.getElementById("myid").style.color = "blue";
         }
      </script>
   </body>
</html>

コードの解説

  • onmousedown="mouseDown()"：マウスボタンが押されたときにmouseDown()関数を呼び出し、対象要素の文字色を黄色（yellow）に変更します。
  • onmouseup="mouseUp()"：マウスボタンが離されたときにmouseUp()関数を呼び出し、文字色を青色（blue）に戻します。
  • document.getElementById()：id属性「myid」を持つ要素を取得し、style.colorプロパティで文字色を動的に変更しています。

このコードをブラウザで表示し、見出し部分でマウスボタンを押してから離してみてください。ボタンを押している間は文字色が黄色になり、離した瞬間に青色へ変化する動作を確認できます。

まとめ

onmouseup属性を使えば、マウスボタンを離したタイミングでJavaScriptを実行できます。onmousedownと組み合わせることで、押す・離すという一連の操作に応じた柔軟なインタラクションを実現できるため、ぜひ実際のWeb制作でも活用してみてください。

  1. HTMLで要素がフォーカスを取得したときにスクリプトを実行する方法

    HTMLでは、onfocus属性を使用することで、要素がフォーカスを取得した瞬間にJavaScriptを実行できます。 onfocus属性とは onfocus属性は、テキスト入力欄やボタンなどのフォーム要素がユーザーによって選択され（フォーカスされ）、入力可能な状態になったときに、指定したスクリプト（関数）を呼び出すイベントハンドラです。 主な活用シーンとしては、以下のようなものが挙げられます。 入力欄がフォーカスされたときに背景色を変えて、現在どの項目を編集中か視覚的に強調する 入力欄のプレースホルダーやヒントテキストを表示する バリデーションメッセージやガイダンスを動的に切り替える 実

  2. HTMLのonmousedown属性でマウスボタンが押されたときにスクリプトを実行する方法

    HTML要素の上でマウスボタンが押された瞬間にスクリプトを実行したい場合は、onmousedown属性を使用します。この属性は、ユーザーが対象の要素をマウスでクリック（押し下げ）したタイミングで、指定したJavaScript関数を呼び出します。なお、onmousedownはボタンを「押した」瞬間に発火するイベントであり、ボタンを「離した」瞬間に発火するonmouseup属性と組み合わせて使うことで、より直感的なインタラクションを実現できます。サンプルコード以下のコードでは、見出し（h3要素）にonmousedown属性とonmouseup属性を設定しています。見出しの上でマウスボタンを押すと文