mouseup/JavaScript

イベントリスナーのmouseupについて説明します。

mouseupの使い方

 mouseupは、ページや要素内でマウスボタンが離された時に処理を実行出来ます。

 以下は、例です。

【mouseup利用例】
<div id="test-mouseup1">
ここでボタンを離します。
</div>

<script>
var x1 = document.getElementById("test-mouseup1");
x1.addEventListener("mouseup", function(){alert("テストです");}, false);
</script>

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

 実行例は、以下の通りです。尚、分かり易いように枠を付けています。

ここでボタンを離します。

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

mouseupとclickの違い

 mouseupと似たような動作をするイベントリスナーとして、clickがあります。clickは、要素内でマウスボタンが押され、その後離す動作をした時がイベント発生となります。mouseupは、マウスボタンが離されただけでイベントが発生します。

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

clickとmouseupの違い

 又、clickは右ボタンではイベントになりませんが、mouseupではイベントになります。

画像での利用例

 mouseupは<img>でも使えます。

【imgタグでの利用例】
<img src="199.png" alt="" id="test-mouseup2" />

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

var x2 = document.getElementById("test-mouseup2");
x2.addEventListener("mousedown", func1, false);
x2.addEventListener("mouseup", func2, false);
x2.addEventListener("mouseout", func2, false);
</script>

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

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

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

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

サポート

・サポートするブラウザ

 以下は、最新バージョンでのサポート状況を示していますが、Internet ExplorerはOSによって使えるバージョンが異なるため、使えるバージョンを示しています。WindowsXPで使えるInternet Explorer8以降、全てのバージョンで使える場合は〇とします。

【サポートするブラウザ】
機種 ブラウザ サポート
パソコン Chrome
Safari
Firefox
Microsoft Edge
Internet Explorer v9以上
スマートフォン Chrome
Safari
Firefox

・サポートするタグ

 <br>等を除いた多くのタグでサポートされています。

  • このエントリーをはてなブックマークに追加