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

Preventing double-click bug with checkbox + label combination

本文关键字：双击 错误 组合 标签 复选框      更新时间：2023-09-26

注意，这个问题可能不适用于普通公众，因为除非你是一个快速点击者，否则不会发生。(150-200ms/点击(我之所以发布这个问题，是因为我的申请表上有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();
})

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

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

这样就可以了-

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

我也面临着类似的问题，我花了一整晚的时间研究如何修复复选框。我也在听"dblclick"事件，以防止双击复选框时发生任何操作。例如：

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

但这里的问题是，它在行动完成后就启动了活动。所以所有的伤害都已经造成了。

有一种非常简单的方法可以解决这个问题，那就是监听事件"change"而不是"click"。在这种情况下，当状态从选中变为未选中，或从未选中变为已选中，而不是单击或双击时，我们将触发事件。

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

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

似乎工作

相关文章：