LoginSignup
3

More than 5 years have passed since last update.

labelクリック時にcheckboxを切り替えられるようにした場合のstopPropagationによる親要素イベントの制御

Posted at

原因は大した話じゃなかったですが、ちょっとハマったのでメモ。

こんな場合

以下のように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.)

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3