jQuery API の dblclick() は、ダブルクリックイベントを実行するメソッド。ダブルクリックイベント時の、ブラウザのデフォルト動作と、dblclick( fn )などでバインドしたイベントハンドラを実行する。
「A要素のイベント時に、B要素のダブルクリックイベントを実行させたい」なんて時に便利だ。
記述方法
jQuery( セレクター ) . dblclick();
「セレクター」の要素のダブルクリックイベントを実行する。
実装例（サンプル）
- リストアイテムA
- リストアイテムB
- リストアイテムC
実装例（サンプル）の動作について
リストアイテムA、リストアイテムB、リストアイテムCを、ダブルクリックすると、ダブルクリックしたリストアイテムが、フェードアウトで消え、すぐに、フェードインで出現する。
「click()」ボタンをクリックすると、全てのリストアイテムが、フェードアウトで消え、すぐに、フェードインで出現する。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-api-click-button' ) . click( function () {
jQuery( '#jquery-api-dblclick li' ) . dblclick();
} );
jQuery( '#jquery-api-dblclick li' ) . dblclick( function () {
jQuery( this ) . fadeOut( 1000 ) . fadeIn( 1000 );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-click-button' ) . click( function () {
jQuery( '#jquery-api-dblclick li' ) . dblclick();
} );
jQuery( '#jquery-api-dblclick li' ) . dblclick( function () {
jQuery( this ) . fadeOut( 1000 ) . fadeIn( 1000 );
} );
} );
// -->
</script>
CSS
<style>
<!--
#jquery-api-dblclick li {
cursor: pointer;
}
-->
</style>
<!--
#jquery-api-dblclick li {
cursor: pointer;
}
-->
</style>
HTML
<p><button id="jquery-api-click-button">click()</button></p>
<ol id="jquery-api-dblclick">
<li>リストアイテムA</li>
<li>リストアイテムB</li>
<li>リストアイテムC</li>
</ol>
<ol id="jquery-api-dblclick">
<li>リストアイテムA</li>
<li>リストアイテムB</li>
<li>リストアイテムC</li>
</ol>