.dblclick()【《ダブルクリック》イベントハンドラ設定・実行】

メモ

構文

説明構文戻り値
《ダブルクリック》
イベントハンドラ設定 		.dblclick( handler ) 1.0

handler：イベントハンドラ
引数説明
[ Event eventObject ]イベントオブジェクト
(this)該当要素 (HTML5：基本DOM要素 参照)
戻り値説明
false
その他 		.on()【イベントハンドラ設定】のイベントのバブルアップ・処理抑止 参照
処理続行

.on( "dblclick", handler ) の省略形 		jQuery
.dblclick( [eventData ], handler ) 1.4.3

Anything eventData：イベントデータ
handler：イベントハンドラ
引数説明
[ Event eventObject ]イベントオブジェクト
(イベントデータは、eventObject.data で参照)
(this)該当要素 (HTML5：基本DOM要素 参照)
戻り値説明
false
その他 		.on()【イベントハンドラ設定】のイベントのバブルアップ・処理抑止 参照
処理続行

.on( "dblclick", handler ) の省略形 		jQuery
《ダブルクリック》
イベントハンドラ実行 		.dblclick() 1.0

.trigger( "dblclick" ) の省略形 		jQuery

関連

例

《ダブルクリック》イベントハンドラ設定

<style>
.classDblclick1 { border:1px red solid; padding:5px 5px; margin:1px 5px; }
</style>

<p>
  <span id="idDblclick11" class="classDblclick1">[ idDblclick11 ]</span>
  <span id="idDblclick12" class="classDblclick1">[ idDblclick12 ]</span>
  <span id="idDblclick13" class="classDblclick1">[ idDblclick13 ]</span>
</p>
<p>
  dblclick イベント：<span id="output1" style="border:1px black solid; padding:1px 5px;">【出力】</span>
</p>


<script>
$("#idDblclick11").dblclick(function() {
  $("#output1").text("[ " + this.id + " ] dblclick");
});

$("#idDblclick12").dblclick("DATA", function(eventObject) {
  $("#output1").text("[ " + this.id + " ] dblclick ( " + eventObject.data + " )");
});

$("#idDblclick13").dblclick({ data1:"DATA1", data2:"DATA2" }, function(eventObject) {
  $("#output1").text("[ " + this.id + " ] dblclick ( " + eventObject.data.data1 + ", " + eventObject.data.data2 + " )");
});
</script>

[ idDblclick11 ] [ idDblclick12 ] [ idDblclick13 ]

dblclick イベント：【出力】

《ダブルクリック》イベントハンドラ実行

<style>
.classDblclick2 { border:1px red solid; padding:5px 5px; margin:1px 5px; }
</style>

<p>
  <span id="idDblclick21" class="classDblclick2">[ idDblclick21 ]</span>
  <span id="idDblclick22" class="classDblclick2">[ idDblclick22 ]</span>
  <button id="button23">[ button23 ]</button>
</p>
<p>
  dblclick イベント：<span id="output2" style="border:1px black solid; padding:1px 5px;">【出力】</span>
</p>

<script>
$("#idDblclick21").dblclick(function() {
  $("#output2").text("[ " + this.id + " ] dblclick");
});

$("#idDblclick22").dblclick(function() {
  $("#output2").text("[ " + this.id + " ] dblclick");
});

$("#button23").click(function() {
  $("#idDblclick21").dblclick();
});
</script>

[ idDblclick21 ] [ idDblclick22 ]

dblclick イベント：【出力】