jQuery API の mousedown( fn ) は、マウスダウンイベントにイベントハンドラをバインドしたいときに便利なメソッドだ。
要素の上でマウスのボタンを押すと、mousedown( fn ) の引数に指定したイベントハンドラを呼び出すことができる。
記述方法
jQuery( セレクター ) . mousedown( イベンドハンドラ );
「セレクター」の要素のマウスダウンイベントに、「イベンドハンドラ」をバインド。
実装例（サンプル）
マウスダウン：
| セル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>