onmouseupの使い方
onmouseupは、ページや要素内でマウスボタンが離された時に処理を実行出来ます。
以下は、例です。
<div onmouseup="alert('テストです');"> ここでボタンを離します。 </div>
実行例は、以下の通りです。尚、分かり易いように枠を付けています。
要素内でマウスボタンを離すと、アラートが表示されます。
イベントハンドラのonmouseupについて説明します。
onmouseupは、ページや要素内でマウスボタンが離された時に処理を実行出来ます。
以下は、例です。
<div onmouseup="alert('テストです');"> ここでボタンを離します。 </div>
実行例は、以下の通りです。尚、分かり易いように枠を付けています。
要素内でマウスボタンを離すと、アラートが表示されます。
onmouseupと似たような動作をするイベントハンドラとして、onclickがあります。onclickは、要素内でマウスボタンが押され、その後離す動作をした時がイベント発生となります。onmouseupは、マウスボタンが離されただけでイベントが発生します。
従って、onclickでは要素外でマウスボタンが押され、要素内で離してもイベントにはなりませんが、onmouseupではイベントになります。
又、onclickは右ボタンではイベントになりませんが、onmouseupではイベントになります。
onmouseupは<img>でも使えます。
<script> function func1() { var x = document.getElementById("test-img"); x.src = "11.png"; } function func2() { var x = document.getElementById("test-img"); x.src = "199.png"; } </script> <img src="199.png" alt="" onmousedown="func1();" onmouseup="func2();" onmouseout="func2();" id="test-img" />
11.pngはスペードAの画像で、199.pngはトランプ裏の画像とします。
赤字部分は、onmousedownを使ってマウスボタンが押された時だけ、画像をスペードのAに入れ替えています。青字部分は、onmouseupによってマウスボタンが離された時、裏の画像に戻しています。緑字のonmouseoutでも関数func2を呼び出しているのは、画像の外にマウスが移動すると裏の画像に戻すためです。
実行例は、以下の通りです。
マウスボタンを押している間だけ、トランプがスペードのAである事が確認出来ます。
・サポートするブラウザ
以下は、最新バージョンでのサポート状況を示していますが、Internet ExplorerはOSによって使えるバージョンが異なるため、使えるバージョンを示しています。WindowsXPで使えるInternet Explorer8以降、全てのバージョンで使える場合は〇とします。
機種 | ブラウザ | サポート |
---|---|---|
パソコン | Chrome | 〇 |
Safari | 〇 | |
Firefox | 〇 | |
Microsoft Edge | 〇 | |
Internet Explorer | 〇 | |
スマートフォン | Chrome | 〇 |
Safari | 〇 | |
Firefox | 〇 |
・サポートするタグ
<br>や<iframe>等を除いた多くのタグでサポートされています。
「イベントハンドラ一覧」に戻る