js STUDIO

.dblclick()

要素のdblclickイベントに実行させたい関数を指定します。

このメソッドは、1つ目と2つ目は.bind('dblclick', handler)への、引数なしの3つ目は.trigger('dblclick')への ショートカットです。

dblclickは、次の条件で発生するイベントです。

  1. 要素内にマウスポインタがある状態で、マウスボタンが押される
  2. 次にそのまま要素内にマウスポインタがある状態で、マウスボタンを離される
  3. そのまま要素内にマウスポインタがある状態で、再度、時間内にマウスボタンが押される(ダブルクリックとみなされる時間間隔はシステム環境に依存します)
  4. 次にそのまま要素内にマウスポインタがある状態で、マウスボタンを離される
ほとんどの要素がこのイベントを受け取る事が出来ます。

.dblclick( handler(eventObject) ) 1.0追加

戻り値:jQuery

要素のdblclickイベントに実行させたい関数を指定します。

引数 説明
handler(eventObject) イベントが発生した際に、実行したい処理を関数として指定します。 
$('#target').dblclick(function() {
  alert('dblclickイベントが発生しました。');
});

.dblclick( [eventData], handler(eventObject) ) 1.4.3追加

戻り値:jQuery

要素のdblclickイベントに実行させたい関数を指定します。

引数 説明
[eventData] マップ値を指定することで、データをイベントハンドラーに渡すことが出来ます。
handler(eventObject) イベントが発生した際に、実行したい処理を関数として指定します。

.dblclick() 1.0追加

戻り値:jQuery

dblclickイベントを発生させます。 

//ID:other要素をクリックすると、ID:targetのクリックイベントも発生させます。
$("#other").dblclick(function() {
  $("#target").dblclick();
});

デモ

ブロックをダブルクリックすると背景色が変わります。 

<!DOCTYPE html>
<html>
<head>
<style>
div { background:blue;
  color:white;
  height:100px;
  width:150px;
}
div.dbl { background:yellow;color:black; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div></div><span>このブロックをダブルクリックしてください。</span>
<script>
var divdbl = $("div:first");
divdbl.dblclick(function () {
  divdbl.toggleClass('dbl');
});
</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM