jQuery API の mouseup( fn ) は、マウスアップイベントにイベントハンドラをバインドしたいときに便利なメソッドだ。
要素の上でクリックボタンを押して放すと、mouseup( fn ) の引数に指定したイベントハンドラを呼び出すことができる。
記述方法
jQuery( セレクター ) . mouseup( イベンドハンドラ );
「セレクター」の要素のマウスアップイベントに、「イベンドハンドラ」をバインド。
実装例（サンプル）
マウスダウン：
| セルA | セルB | セルC |
| セルＤ | セルＥ | セルＦ |
実装例（サンプル）の動作について
セルAに、カーソルを合わせ、クリックボタンを押し続けている間、セルAの背景色を黄色に変え、「マウスダウン： 」の右側に、「セルA」と表示する。セルAに、カーソルを合わせたまま、クリックボタンを放すと、元に戻る。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-api-mousedown td' ) . mousedown( function () {
jQuery( this ) . css( 'backgroundColor', 'yellow' );
var str = jQuery( this ) . text();
jQuery( '#jquery-api-mousedown-contents' ) . text( str );
} );
jQuery( '#jquery-api-mousedown td' ) . mouseup( function () {
jQuery( this ) . css( 'backgroundColor', '#ffffff' );
var str = '';
jQuery( '#jquery-api-mousedown-contents' ) . text( str );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-mousedown td' ) . mousedown( function () {
jQuery( this ) . css( 'backgroundColor', 'yellow' );
var str = jQuery( this ) . text();
jQuery( '#jquery-api-mousedown-contents' ) . text( str );
} );
jQuery( '#jquery-api-mousedown td' ) . mouseup( function () {
jQuery( this ) . css( 'backgroundColor', '#ffffff' );
var str = '';
jQuery( '#jquery-api-mousedown-contents' ) . text( str );
} );
} );
// -->
</script>
HTML
<p>マウスダウン： <span id="jquery-api-mousedown-contents"></span></p>
<table id="jquery-api-mousedown">
<tr>
<td>セルA</td>
<td>セルB</td>
<td>セルC</td>
</tr>
<tr>
<td>セルＤ</td>
<td>セルＥ</td>
<td>セルＦ</td>
</tr>
</table>
<table id="jquery-api-mousedown">
<tr>
<td>セルA</td>
<td>セルB</td>
<td>セルC</td>
</tr>
<tr>
<td>セルＤ</td>
<td>セルＥ</td>
<td>セルＦ</td>
</tr>
</table>