【jQuery】ラベルで囲まれたチェックボックスでclickイベントが2回実行される

事象

以下のソースで、チェックボックスもしくはラベルをクリックしたときにclickイベントが発生することを期待。

しかし、ラベル部分をクリックしたとき2回clickイベントが実行されてしまう。（チェックボックスをクリックだと1回）

おそらく、ラベルをクリックで1回。それを契機に、チェックボックスがクリックと見なされ、それがバブリングしてさらに1回。こういうことだと思う。

html

<label>
  <input type="checkbox">
  testtest
</label>

jQuery

$('label').click(function(){
  console.log('test');
})

対策

ググった結果、対策は2つ。

input要素のクリックをイベント対象にする方法

ラベル部分クリックでチェックボックスクリックが走るので。

jQuery

$('input').click(function(){
  console.log('test');
})

チェックボックスにchangeイベントを対象にする方法

ラベル部分クリックで、チェックボックにチェックのON/OFF走るので。

jQuery

$('input').change(function(){
  console.log('test');
})

雑感

そもそもラベルにイベントを設定したのは、チェックボックスだけでなくラベルクリックでもイベントを拾うためだったが、チェックボックスにイベントを設定しても、ラベルクリック→チェックボックスクリックとなるので、チェックボックスにイベントを設定しても期待する動きになった。