チェックボックスのクリックでイベントのバブリングを停止する方法

クリックイベントでAjaxアクションを実行するチェックボックスがありますが、チェックボックスはコンテナー内にもあり、チェックボックスがクリックされたときに実行したくない独自のクリック動作があります。このサンプルは、私がやりたいことを示しています。

$(document).ready(function() {
  $('#container').addClass('hidden');
  $('#header').click(function() {
    if ($('#container').hasClass('hidden')) {
      $('#container').removeClass('hidden');
    } else {
      $('#container').addClass('hidden');
    }
  });
  $('#header input[type=checkbox]').click(function(event) {
    // Do something
  });
});

#container.hidden #body {
  display: none;
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="container">
  <div id="header">
    <h1>Title</h1>
    <input type="checkbox" name="test" />
  </div>
  <div id="body">
    <p>Some content</p>
  </div>
</div>

ただし、デフォルトのクリック動作（チェックボックスがオン/オフになっている）を実行させずにイベントのバブリングを停止する方法を理解することはできません。

次のどちらもイベントのバブリングを停止しますが、チェックボックスの状態は変更しません。

event.preventDefault();
return false;

取り替える

event.preventDefault();
return false;

と

event.stopPropagation();

event.stopPropagation（）

親要素へのイベントのバブリングを停止し、親ハンドラーにイベントが通知されないようにします。

event.preventDefault（）

ブラウザーがデフォルトのアクションを実行しないようにします。isDefaultPreventedメソッドを使用して、このメソッドが（そのイベントオブジェクトで）呼び出されたかどうかを確認します。

stopPropagationメソッドを使用します。

event.stopPropagation();

IEを忘れないでください。

if (event.stopPropagation) {    // standard
        event.stopPropagation();
    } else {    // IE6-8
        event.cancelBubble = true;
}

他の人が述べたように、してみてくださいstopPropagation()。

そして、2番目に試すハンドラがありますevent.cancelBubble = true;。IE固有のハンドラですが、少なくともFFでサポートされています。私自身は使っていないので、あまり詳しくは知りませんが、他の方法がすべて失敗した場合は、試してみる価値があります。

これは、イベントバブリングの概念を理解するための優れた例です。上記の回答に基づいて、最終的なコードは次のようになります。ユーザーがチェックボックスをクリックすると、その親要素「ヘッダー」へのイベントの伝達がを使用して停止されevent.stopPropagation();ます。

$(document).ready(function() {
            $('#container').addClass('hidden');
            $('#header').click(function() {
                if($('#container').hasClass('hidden')) {
                    $('#container').removeClass('hidden');
                } else {
                    $('#container').addClass('hidden');
                }
            });
          $('#header input[type=checkbox]').click(function(event) {
              if (event.stopPropagation) {    // standard
                   event.stopPropagation();
               } else {    // IE6-8
                    event.cancelBubble = true;
               }
          });     
  });

jQueryを使用する場合、停止関数を個別に呼び出す必要はありません。

あなただけfalseのイベントハンドラに戻ることができます

これにより、イベントが停止し、バブリングがキャンセルされます。

event.preventDefault（）とfalseを返すも参照してください

jQueryドキュメントから：

したがって、これらのハンドラーは、を呼び出すevent.stopPropagation()か返すことによって、委任されたハンドラーがトリガーされないようにすることができfalseます。

コードの@mehrasへのクレジット。私はそれを実証するためにスニペットを作成したばかりです。

$(document).ready(function() {
  $('#container').addClass('hidden');
  $('#header').click(function() {
    if ($('#container').hasClass('hidden')) {
      $('#container').removeClass('hidden');
    } else {
      $('#container').addClass('hidden');
    }
  });
  $('#header input[type=checkbox]').click(function(event) {
    if (event.stopPropagation) { // standard
      event.stopPropagation();
    } else { // IE6-8
      event.cancelBubble = true;
    }
  });
});

div {
  text-align: center;
  padding: 2em;
  font-size: 1.2em
}

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="header"><input type="checkbox" />Checkbox won't bubble the event, but this text will.</div>
<div id="container">click() bubbled up!</div>

angularjsではこれはうまくいくはずです：

event.preventDefault(); 
event.stopPropagation();