点击事件被触发两次 - 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' 效果很好，并引发其中复选框的单击事件。

然而，当我准确地单击复选框本身时，它会触发其“正常”事件，加上上面的 jquery 绑定事件，这意味着复选框会检查自身，然后再次取消选中自身。

有没有一种简洁的方法来防止这种情况发生？

Answer 1

怎么样：不使用 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 - 然后 -

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