原因は大した話じゃなかったですが、ちょっとハマったのでメモ。
こんな場合
以下のようにcheckboxとlabel、親となる要素(ここではdiv)があったとします。
sample.html
<div id="container">
<label id="testLabel"><input type="checkbox" id="testCheckBox" name="testCheckBox" />ラベル</label>
</div>
で、イベントがこう。(jQuery使用)
sample.js
$('#container').click(function(e) {
alert('container');
});
$('#testCheckBox').click(function(e) {
// 親要素のイベントを発生させない。
e.stopPropagation();
alert('checkbox');
});
ハマったのは、「checkboxをクリックした際に、親要素のイベントを発生させたくない」という動きです。
問題
この状態でcheckboxを直接クリックした場合は、狙い通りdivのイベントは発生しません。
が、labelをクリックした場合はcheckboxのイベントが発生したあと、divのイベントが発生してしまいます。
原因
原因は簡単なことでしたが、labelをクリックした際に発生するのはあくまでもlabelのclickイベントであって、そこからcheckboxのclickイベントが呼ばれているということを見逃していました。
解決方法
なので、labelクリック時に親要素のdivのイベントを発生させないようにするには、こうすると良かった。
sample.js(修正後)
$('#container').click(function(e) {
alert('container');
});
$('#testCheckBox').click(function(e) {
// 親要素のイベントを発生させない。
e.stopPropagation();
alert('checkbox');
});
// 以下を追記
$('#testLabel').click(function(e) {
e.stopPropagation();
});
もっと良い方法あるかもだけど、とりあえず解決。
Blog URL : http://www.utano.jp/ (Syntax Error.)