onmouseupイベント

onmouseupイベント(マウスアップイベント)とは、マウスの何れかのボタンを放した時のイベント。

構文

HTML

<element onmouseup="イベントハンドラ">

ボタン要素
<button onmouseup="イベントハンドラ">ボタン</button>
LI要素
<li onmouseup="イベントハンドラ">リスト項目</li>

JavaScript

object.onmouseup = function(){ イベントハンドラ };

サンプル1

HTMLドキュメント上でイベントハンドラを登録するサンプル。

0

サンプル1の動作について

  • 「カウントアップ」ボタンをクリックする度に、ボタンの右横の数値に1を加算する。
  • 「カウントアップ」ボタンを押している間だけ、ボタンの右横の数値の色が赤色になる。ボタンを放すと元の色に戻る。

サンプル1のソースコード

JavaScript

<script type="text/javascript">
var $countA = 0;
function countUpA() {
 var $elementReference = document.getElementById( "sampleOutputA" );
 $elementReference.innerHTML = ++$countA;
}
function chageColorA( $color ) {
 var $elementReference = document.getElementById( "sampleOutputA" );
 $elementReference.style.color = $color;
}
</script>

HTML

<p>
 <button onmousedown="countUpA();chageColorA('#FF0000');" onmouseup="chageColorA('#333333');">カウントアップ</button>
 <span id="sampleOutputA" style="margin-left: 10px;">0</span>
</p>

サンプル2

JavaScript上で動的にイベントハンドラを登録するサンプル。

0

サンプル2の動作について

  • 「カウントアップ」ボタンをクリックする度に、ボタンの右横の数値に1を加算する。
  • 「カウントアップ」ボタンを押している間だけ、ボタンの右横の数値の色が赤色になる。ボタンを放すと元の色に戻る。

サンプル2のソースコード

JavaScript

<script type="text/javascript">
window.onload = function () {
 document.getElementById( "sampleButtonB" ).onmousedown = function(){
  countUpB();
  chageColorB('#FF0000');
 };
 document.getElementById( "sampleButtonB" ).onmouseup = function(){
  chageColorB('#333333');
 };
}
var $count = 0;
function countUpB() {
 document.getElementById( "sampleOutputB" ).innerHTML = ++$count;
}
function chageColorB( $color ) {
 document.getElementById( "sampleOutputB" ).style.color = $color;
}
</script>

HTML

<p>
 <button id="sampleButtonB">カウントアップ</button>
 <span id="sampleOutputB" style="margin-left: 10px;">0</span>
</p>

スポンサード リンク

カテゴリー: DOM, JavaScript, イベント, マウスイベント, リファレンス パーマリンク