javascript - 如何在复选框单击时停止事件冒泡

Question

我有一个复选框，我想在单击事件上执行一些 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="https://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;

Answer 1

替换

event.preventDefault();
return false;

与

event.stopPropagation();

event.stopPropagation()

Stops the bubbling of an event to parent elements, preventing any parent handlers from being notified of the event.

event.preventDefault()

Prevents the browser from executing the default action. Use the method isDefaultPrevented to know whether this method was ever called (on that event object).