点击事件被触发两次 - jquery答案

【问题标题】：click event being fired twice - jquery点击事件被触发两次 - jquery
【发布时间】：2011-01-10 17:43:45
【问题描述】：

我有以下简化的 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 绑定事件，这意味着复选框会自行检查，然后再次取消选中。

有没有一种整洁的方法可以防止这种情况发生？

【问题讨论】：

在 IE 中看起来还行，在 FF 中不行。

标签： jquery html input

【解决方案1】：

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

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

【讨论】：

如果可能的话，绝对是要走的路。

【解决方案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/

【讨论】：

+1 用于在现有选择器上使用链接和非常简洁的false 形式的bind。
@Phrogz：谢谢，但我不得不改变它，因为false 也做了preventDefault。 :o(
噢！好吧，您的新答案与我的答案不一致，所以很明显我将不得不取消我的投票。 :)
对@Phrogz 感到抱歉。我正忙着寻找我的愚蠢的错误，我没有看到你的。顺便说一句，看起来你有一个类似的错误，但方法是正确的，所以你的 +1。 :o)
嘿，我是 j/k :)。您仍然可以投票，无需道歉。你是对的，我的被窃听了。删除并添加更好的答案:)

【解决方案3】：

您需要停止单击复选框，以免它冒泡到 div。

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

【讨论】：

【解决方案4】：

这是因为当您单击复选框时，您也在单击 div，因为复选框在其中。因此，您应该做的是在用户单击 div 内部但没有复选框时捕获。如果用户确实单击了该复选框，它将使用其默认行为检查/取消检查

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

【讨论】：

【解决方案5】：

在 yiur $(document).ready function 中包含以下函数 -

然后给你的复选框一个 id say test -

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

【讨论】：