如何停止复选框上的事件冒泡

我有一个复选框，我想对click事件执行一些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()。

还有第二个处理程序可以尝试：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时，您无需单独调用stop函数。

你可以回来 false事件处理程序

这将停止事件并取消冒泡。

另请参阅event.preventDefault（）与return false

从jQuery文档中：

因此，这些处理程序可能会通过调用event.stopPropagation()或return 阻止委托处理程序触发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();