HTML の onmouseup 属性

マウスのボタンを押下した後で離すときに実行するJavaScriptを記述します。onmouseup属性は省略可能です。

ボタンを離すと、onmousedownイベントが発生します。

onclickとの違い

onmouseupとよく似たイベントでonclickイベントがあります。

どちらもマウスボタンを離したときに起こるイベントですが、onclickはボタンを押した要素でボタンを離したときに起こるイベントです。

これに対して、onmouseupはボタンをどこで押したかに関わらず、ボタンを離した場所で発生するイベントです。ほかの場所でボタンを押し、そのままマウスカーソルを動かして別の場所でボタンを離すと、onmouseupイベントのみが発生します。

サンプル

<button type="button" onmousedown="mouseDown()" onmouseup="mouseUp()">
  Button
</button>
<p>
  Event: <span id="event"></span>
</p>
<script>
  function mouseDown() {
    document.getElementById("event").innerHTML = "mousedown";
  }
  function mouseUp() {
    document.getElementById("event").innerHTML = "mouseup";
  }
</script>

Event:

イベントリスナー

onmouseup属性を使わずに、イベントリスナーを使ってイベント処理を行うこともできます。

<button type="button" id="btn">
  Button
</button>
<p>
  Event: <span id="evnt"></span>
</p>
<script>
  e = document.getElementById("btn");
  e.addEventListener("mousedown", function(){
    document.getElementById("evnt").innerHTML = "mousedown";
  });
  e.addEventListener("mouseup", function(){
    document.getElementById("evnt").innerHTML = "mouseup";
  });
</script>

Event: