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

注意：这个问题可能不适用于一般公众，因为除非你是一个快速点击者，否则它不会发生。（150-200毫秒/点击）我之所以发布此问题，是因为我的申请表上有20多个复选框，并且经过广泛研究，我没有发现与此相关的问题

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

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

假设在每种情况下，所有CBs均未选中

预期行为：

我快速连续点击4个CBs，它们都将被选中。（对）

我快速连续点击4个标签，相应的CBs被选中。（仅适用于Chrome，但仍不是最佳）

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

（在Firefox 19中）CB2和CB4未选中，在列表中，标签2和标签4的“标签”一词会突出显示，就像我双击了它们一样

（在Chrome 26中）所有的CBs都得到了正确的检查，但在列表中，标签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();
})

这样就行了-

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

试试这个：

$(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
});

---

最后得到了一个适用于所有浏览器的非常丑陋的黑客，希望这能帮助其他遇到问题的人：

使用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();
})

---

我还面临着一个类似的问题，我花了一整晚的时间研究如何为checkbox解决这个问题。我还在听“dblclick”事件，以防止双击复选框时发生任何操作。 例：

但这里的问题是，它是在动作完成后触发事件的。所以所有的破坏都已经造成了

有一个非常简单的方法来解决这个问题，就是监听事件“change”，而不是监听“click”。在这种情况下，当状态从“检查”更改为“未检查”，或从“未检查”更改为“已检查”，而不是单击或双击时，我们将触发事件

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

---

似乎有效

感谢您的快速响应，我应该在上面提到这一点，但这是我最初的尝试，在firefox中没有任何效果。我仍然会投票支持你的答案，因为它确实帮助了Chrome。编辑：在进一步的测试中，它没有做任何事情，因为它没有贴在标签上。即使在贴上Chrome标签的时候，它也只是在做它以前做的事情……在过去的两个小时里，它尝试了所有的事情，最终放弃了，只是做了一个非常丑陋的黑客。作为dblclick上的默认值似乎没有任何作用-很可能这是Windows问题。请告诉我是否有更简单的方法可以工作。根据我的测试，涉及dblclick的其他建议不起作用。

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

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