jQueryにはHTMLやCSSにさまざまな処理を加える便利なメソッドやイベントがあります。そのイベントの中でdblclick()イベントは、あらかじめイベントを設定しておけばマウス操作で発火させることができます。
この記事では「dblclick()イベントの使い方」について解説します。記事の後半では「on('dblclick')との違い」について解説していきます！
dblclickイベントと似ているclickイベントについては、下記でも紹介していますのでご一読ください。
- jQueryのdblclickイベントの使い方
- dblclickイベントとon('dblclick')の違い
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
jQueryのdblclick()イベントの使い方
dblclick()イベントはjQueryのメソッドの一つです。ダブルクリックされた際に、登録したイベントを発火することができます。
jQueryでのdblclickイベントの基本書式は次のようになります。
基本書式
$('セレクタ').dblclick(function(){
// ここにダブルクリックしたら発火する処理を記述する
});dblclickイベントにコードを当てはめると次のようになります。
dblclick()イベントのサンプル
<button id="js-btn">ボタンダブルクリックでアラートが出る</button>const btn = $('#js-btn');
const box = $('.box');
btn.dblclick(function () {
alert('ダブルクリックされました');
});出力結果
See the Pen dblclick-alert by ZeroPlus (@zeroplus-programming) on CodePen.
上記の場合、ボタンを1回クリックしても何も起きませんが、ダブルクリックするとalreatメソッドによってアラートが出るようになります。
このようにクリックイベントは単体では何も起きませんが、クリックイベントにメソッドなどさまざまな処理を記述することで、クリックしてイベントを「発火」させることができます。
dblclick()イベントでクラスを追加・削除してスタイルを変更する
dblclickイベントにtoggleメソッドやaddClassメソッド、removeClassメソッドなどのメソッドを適用して要素にクラスを追加、削除することができます。
例えば、次のように「ボタンをダブルクリックしたら要素にクラスを追加・削除する」イベントを適用してみます。
<button id="js-btn">ボタンダブルクリック！</button>
<div class="box"></div>.box {
width: 200px;
height: 200px;
background: orange;
transition: .4s;
}
.box.is-active {
transform: translate(30%);
}const btn = $('#js-btn');
const box = $('.box');
btn.dblclick(function () { // ボタンをダブルクリックしたら
box.toggleClass('is-active'); // boxクラスにis-activeクラスの付け外し
});出力結果
See the Pen dblclick-toggleClass by ZeroPlus (@zeroplus-programming) on CodePen.
あらかじめCSSでis-activeクラスが付与された状態のスタイルを用意しておきます。ボタンをダブルクリックすると、toggleClass()メソッドによってis-activeクラスの付け外しを行っています。
dblclick()イベントとon('dblclick')の違い
on()メソッドとはjQueryのメソッドの一つです。on()メソッドは指定したイベントを発火させることができます。
on()メソッドの基本書式
$('セレクタ').on(イベント名, 実行する処理());コードを当てはめると次のように記述できます。
on()メソッドのサンプル
<button id="js-btn">ボタンダブルクリック！</button>const btn = $('#js-btn');
btn.on('dblclick', function () {
alert('ダブルクリックされました');
});出力結果
See the Pen on('dblclick') by ZeroPlus (@zeroplus-programming) on CodePen.
dblclick()イベントと同様の結果を得ることができました。
dblclick()イベントとon('dblclick')メソッドの違いはいったい何でしょうか？
実はこの2つの違いは、下記になります。
- 複数のイベントを登録できるかどうか
- jQueryで後から追加した要素に、イベントを登録できるかどうか
dblclick()イベントはクリックイベントしか登録できない
dblclick()イベントはクリックイベントしか登録できませんが、on('dblclick')メソッドは複数のイベントを登録することができます。
例えばon('dblclick')メソッドは次のように複数のイベントを登録できます。
on('dblclick')メソッドで複数イベント登録
<button id="js-btn">クリックで移動！ダブルクリックで赤くなる！</button>
<div class="box"></div>.box {
width: 200px;
height: 200px;
background: orange;
transition: .4s;
}
.box.is-active {
transform: translate(30%);
}const btn = $('#js-btn');
const box = $('.box');
btn.on({
'click': function () {
box.toggleClass("is-active");
},
'dblclick': function () {
box.css('background', 'red');
}
});出力結果
See the Pen on('dblclick')-複数イベント by ZeroPlus (@zeroplus-programming) on CodePen.
on()メソッドで「ボタンをクリックしたら要素にis-activeクラスを追加・削除」イベントと「ボタンをダブルクリックしたら要素の色が変わる」イベントが発火するようになりました。このようにon()メソッドでは複数のイベントを登録することができます。
dblclick()イベントは、jQueryで後から追加された要素にイベントを登録できない
dblclick()イベントは、次のようにafterメソッドによって要素が追加されてもイベントを登録することができません。
<button id="js-btn">ダブルクリック！</button>
<div class="box"></div>.box {
width: 200px;
height: 200px;
background: orange;
transition: .4s;
}
.box2 {
width: 100px;
height: 100px;
background: orange;
}
.box.is-active {
transform: translate(30%);
}const btn = $('#js-btn');
const box = $('.box');
btn.dblclick(function () {
$('div').after("<div class=box2>dblclick!</div>");
});
btn.dbclick(function () {
$('.box2').css('background', 'red');
});出力結果
See the Pen dblclick-動的 by ZeroPlus (@zeroplus-programming) on CodePen.
const btn = $('#js-btn');
const box = $('.box');
btn.on('dblclick', function () {
box.after('<div class="box2">ダブルクリック！</div>');
});
$(document).on('dblclick', '.box2', function () {
$(this).css('background', 'red');
});出力結果
See the Pen on('dblclick')2 by ZeroPlus (@zeroplus-programming) on CodePen.
on('dblclick')メソッドの場合、要素が生成されたものだとしてもCSSメソッドが効きます。
dblclick()イベントが効かないときの対処法
dblclick()イベントは、動的に生成された要素に効きません。
その場合はon('dblclick')メソッドに記述を変更するなどして対処しましょう！
まとめ
dblclick()イベントはさまざまなイベントを登録して、HTMLやCSSを制御することができます。動的に生成された要素にdblclick()イベントが効かないなど注意点に気を付けつつ、dblclick()イベントとon('dblclick')メソッドをうまく使い分けて処理を実装しましょう。
dblclick()イベントまとめ
- dblclick()イベントはダブルクリックでイベントを発火できる
- 動的に生成された要素には効かない
- 複数のイベントを登録する場合はon('dblclick')を使う
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
