onmouseup

onmouseupの基本的な使い方

イベントハンドラのonmouseupは、ページや要素内でマウスボタンが離された時に処理を実行できます。

以下は、利用例です。

<div id="test-up">
ここをクリックします。
</div>

<script>
const x = document.querySelector("#test-up");
x.onmouseup = function(){alert("テストです");};
</script>

赤字部分でmouseupイベントを登録しています。

実行例は、以下のとおりです。

要素内でマウスボタンを離すと、アラートが表示されます。

onmouseupとonclickの違い

onmouseupと似た動作をするイベントハンドラとして、onclickがあります。onclickは、要素内でマウスボタンが押され、その後離す動作をした時がイベント発生となります。onmouseupは、マウスボタンが離されただけでイベント発生します。

したがって、onclickは要素外でマウスボタンが押された後、要素内で離してもイベントになりませんが、onmouseupではイベントになります。

また、onclickは右ボタンではイベントになりませんが、onmouseupではイベントになります。

画像での利用例

onmouseupは、img要素でも使えます。

<img src="199.png" alt="" id="test-up">

<script>
function func1() {
  x.src = "11.png";
}
function func2() {
  x.src = "199.png";
}

const x = document.querySelector("#test-up");
x.onmousedown = func1;
x.onmouseup = func2;
x.onmouseout = func2;
</script>

11.pngはスペードAの画像で、199.pngはトランプ裏の画像とします。

赤字部分は、onmousedownを使ってマウスボタンが押された時だけ、画像をスペードのAに入れ替えています。青字部分は、onmouseupによってマウスボタンが離された時、裏の画像に戻しています。緑字のonmouseoutでも関数func2を呼び出しているのは、画像の外にマウスが移動すると裏の画像に戻すためです。

実行例は、以下のとおりです。

マウスボタンをクリックしている間だけ、トランプがスペードのAであることが確認できます。

HTMLの属性として記述する(非推奨)

onmouseupは、HTMLの属性としても記述できます。

<div onmouseup="alert('テストです');">
ここをクリックします。
</div>

divタグで、onmouseup属性によってalertを実行しています。これでも、同じ動作をします。

属性で記述する方法は、以前は多く使われていましたが、今では非推奨になっています。新しくスクリプトを作る時は、これまで説明したプロパティで記述するか、イベントリスナーを使って記述がお薦めです。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

〇

サポート

△

制限あり

×

未サポート

？

不明

IE

Internet Explorer

Ed

Edge

Fx

Firefox

Ch

Chrome

Sa

Safari

Op

Opera

An

Android Browser

Sm

Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。