使用复选框+标签组合防止双击错误答案

【问题标题】：Preventing double-click bug with checkbox + label combination使用复选框+标签组合防止双击错误
【发布时间】：2013-03-28 19:21:15
【问题描述】：

请注意，此问题可能不适用于公众，因为除非您是快速点击者，否则不会发生此问题。（150-200 毫秒/点击） 我发布此问题的原因是因为我的应用程序有一个包含 20 多个复选框的表单，经过广泛研究，我没有发现与此问题相关的问题。

这是一个简化的场景 - 4 个复选框和 4 个标签，每个复选框 id 一个：

[CB1] Label 1
[CB2] Label 2
[CB3] Label 3
[CB4] Label 4

假设在每种情况下所有 CB 都未选中。

预期行为：

我快速连续点击4个CB，它们都会被选中。（真）
我快速连续单击 4 个标签，相应的 CB 变为选中状态。（仅适用于 Chrome，但仍不是最佳选择）

Win 7 上案例 2 的实际行为（单击标签，因为如您所知，标签很大且可以设置样式，而复选框很小且依赖于操作系统）：

（在 Firefox 19 中）CB2 和 CB4 处于未选中状态，在列表中向下显示标签 2 和标签 4 的“标签”一词，就像我双击它们一样。
（在 Chrome 26 中）所有 CB 都得到了正确检查，但在向下查看列表时，标签 2 和标签 4 的“标签”一词会突出显示，就像我双击它们一样。
（在 IE 10 中）CB2 和 CB4 未选中，但没有错误突出显示。

如果点击是在同一个元素上，则错误行为可能是合理的。在我们的例子中，这些显然是具有不同 ID 和名称的唯一复选框。所以结果出乎意料。

所以我的问题是：

有没有办法在我快速单击不同的复选框时禁用双击事件，但仍然通过快速单击来检查它们？

我最接近的是以下脚本，有趣的是，它使 Firefox 的行为类似于 Chrome，而 Chrome 的行为类似于 Firefox：

jQuery(document).on('dblclick', 'input:checkbox+label', function(event){
    console.log('ugly hack fired');
    $(this).click();
    event.preventDefault();
})

【问题讨论】：

标签： javascript jquery css forms

【解决方案1】：

这样就可以了-

$("input[type='checkbox']").dblclick(function (event)
{
    event.preventDefault();
});

【讨论】：

感谢您的快速响应，我可能应该在上面提到这一点，但这是我最初的尝试，它在 Firefox 中什么也没做。我仍然会赞成您的回答，因为它确实对 Chrome 有帮助。
编辑：在进一步的测试中它没有做任何事情，因为它没有附加到标签上。即使附加到标签 Chrome 只是在做它以前在做的事情......

【解决方案2】：

试试这个：

$(document).on('dblclick', 'input:checkbox, label', function (event) {
    event.preventDefault();
    // Your code goes here   
})

OR

$("input:checkbox, label").dblclick(function (event) {
    event.preventDefault();
    // Your code goes here
});

OR

$('input:checkbox').add('label').dblclick(function (event) {
    event.preventDefault();
    // Your code goes here
});

【讨论】：

过去 2 小时一直在尝试一切，最后放弃了，只是做了一个非常丑陋的 hack。原因是 dblclick 上的 preventDefault 似乎没有做任何事情 - 很可能这是一个 Windows 问题。

【解决方案3】：

终于得到了一个适用于所有浏览器的非常丑陋的 hack，希望这可以帮助遇到问题的其他人：

使用 css 禁用选择，因为在 JS 中这样做效率太低了：

.form_class input[type=checkbox] + label{
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -o-user-select:none;
    user-select:none;
}

防止 JS 中的所有点击，并手动执行点击应该执行的操作：

jQuery(document).on('click', '.form_class input:checkbox+label', function(event){
    // Assuming label comes after checkbox
    $(this).prev('input').prop("checked", function(i, val){
        return !val;
    });
    event.preventDefault();
})

【讨论】：

请让我知道是否有任何更简单的方法可行。根据我的测试，涉及 dblclick 的其他建议不起作用。

【解决方案4】：

我也遇到了类似的问题，我花了一整夜研究如何修复复选框。我还在听“dblclick”事件，以防止在双击复选框时发生任何操作。例如：

#(".some_class").on("dblclick",function(event){
event.preventDefault();
});

但这里的问题是它在操作完成后触发了事件。所以所有的伤害都已经造成了。

有一个非常简单的方法可以解决这个问题，即通过监听事件“更改”而不是监听“点击”。在这种情况下，当状态从选中变为未选中或从未选中变为选中而不是单击或双击时，我们将触发事件。

#(".some_class").on("change",function(event){
event.preventDefault();
});

【讨论】：

【解决方案5】：

$('.checkbox_class').click(function(event){
    if (event.ctrlKey){ event.preventDefault();
//rest of the code

似乎有效

【讨论】：