我有一个复选框,我想要在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="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;