如何停止点击复选框上的事件冒泡
我有一个复选框，我希望对click事件执行一些Ajax操作，但复选框也位于具有自己的单击行为的容器内，当单击该复选框时，该复选框不想运行。 这个例子说明了我想要做的事情：
<html lang="en">
<head>
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(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
});
});
</script>
<style type="text/css">
#container.hidden #body {
display:none;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Title</h1>
<input type="checkbox" name="test" />
</div>
<div id="body">
<p>Some content</p>
</div>
</div>
</body>
</html>
但是，我无法弄清楚如何停止事件冒泡而不会导致默认点击行为（复选框变为checked / unchecked）而不运行。
以下两项都会停止冒泡事件，但也不会更改复选框状态：
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;
}