我有以下简化的html：
<div class="foo" style="width:200px; height:200px;">
<input type="checkBox" />
</div>
<script type="text/javascript">
$('.foo').click(function(){$(this).find('input:checkBox')[0].click();});
</script>
单击200×200 div’foo’效果很好,并为其中的复选框引发click事件.
但是,当我完全单击复选框本身时,它会触发其“正常”事件以及上面的jquery绑定事件,这意味着复选框会自行检查,然后再次取消选中.
是否有一种防止这种情况发生的整洁方法？
解决方法
事件泡沫.您需要测试单击的e.target.
如果您只是想检查/取消选中该框,则应设置其已检查的属性.
$('.foo').click(function( e ){
if( e.target.tagName.toupperCase() !== 'INPUT' ) {
var cBox = $(this).find('input:checkBox')[0];
cBox.checked = !cBox.checked;
}
});
编辑：修正了一些错误.
工作演示：http://jsfiddle.net/LhSG9/