9

请注意，此问题可能不适用于公众，因为除非您是快速点击者，否则不会发生此问题。（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，但仍不是最佳的）

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

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

5 回答 5

8

终于得到了一个适用于所有浏览器的非常丑陋的 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();
})
于 2013-04-06T11:30:15.380 回答
1

这样就可以了——

$("input[type='checkbox']").dblclick(function (event)
{
    event.preventDefault();
});
于 2013-04-06T10:39:07.040 回答
1

试试这个：

$(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
});
于 2013-04-06T11:08:59.390 回答
0

我也面临着一个类似的问题，让我整晚都在研究如何修复复选框。我还在听“dblclick”事件，以防止在双击复选框时发生任何操作。前任：

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

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

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

#(".some_class").on("change",function(event){
event.preventDefault();
});
于 2017-02-17T05:48:21.410 回答
-1 
$('.checkbox_class').click(function(event){
    if (event.ctrlKey){ event.preventDefault();
//rest of the code

似乎工作

于 2017-02-24T14:17:46.560 回答