点击事件被触发两次 - jquery

Question

我有以下简化的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>

单击200x200 div'foo'效果很好,并为其中的复选框引发click事件.

但是,当我完全单击复选框本身时,它会触发其"正常"事件以及上面的jquery绑定事件,这意味着复选框会自行检查,然后再次取消选中.

是否有一种防止这种情况发生的整洁方法？

Answer 1

怎么样:不使用div,而是使用<label>.它在语义上更正确,完全符合您的要求,并且不需要JavaScript.

这里的工作示例:http://jsfiddle.net/LhSG9/1/

Answer 2

事件泡沫.您需要测试e.target点击的内容.

如果您只是想检查/取消选中该框,则应设置其checked属性.

$('.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/

Answer 3

你需要停止点击复选框,这样它就不会冒泡到div.

$('.foo input:checkbox').click(function(e){
    // will stop event from "bubbling"
    e.stopPropagation()
})