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

Question

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

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

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

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

预期行为:

1. 我快速连续点击 4 个 CB，它们都会被选中。 (正确)
2. 我快速连续点击 4 个标签，相应的 CB 变为选中状态。 (仅适用于 Chrome，但仍不是最佳选择)

案例 2 在 Win 7 上的实际行为(点击标签，因为如您所知，标签很大且可设置样式，而复选框很小且取决于操作系统):

1. (在 Firefox 19 中)CB2 和 CB4 未选中，在列表中向下移动时，标签 2 和标签 4 突出显示“标签”一词，就好像我双击它们一样。
2. (在 Chrome 26 中)所有 CB 都得到正确检查，但在列表中向下移动时，标签 2 和标签 4 突出显示“标签”一词，就好像我双击它们一样。
3. (在 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();
})

Answer 1

终于得到了一个适用于所有浏览器的非常丑陋的 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();
})