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

这个怎么样：使用<label>而不是使用div。它在语义上更正确，完全符合您的要求，并且不需要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()
})

Answer 4

之所以会发生这种情况，是因为当您点击复选框时，您也会点击div，因为复选框位于其中。所以你应该做的是当用户点击div内部而不是复选框时捕获。如果用户单击该复选框，它将使用其默认行为检查/取消选中

$('.foo:not(':checkbox')').click(function(){
    $(this).find('input:checkbox')[0].click();
});

Answer 5

在yiur $(document).ready function -

中包含以下功能

然后在您的复选框中输入id say -

$('#test').click(function(){
return false;
});

点击事件被触发两次 - jquery

5 个答案: