Question

请注意，此问题可能不适用于一般公众，因为除非您是快速点击者，否则不会发生此问题。（150-200ms /点击）我发布此问题的原因是因为我的应用程序有一个彼此相邻的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未经检查，在列表中，“Label”字样突出显示标签2和标签4，就好像我双击它们一样。
（在Chrome 26中）所有CB都得到了正确的检查，但在列表中，“Label”字样突出显示标签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(); })

Answer 1

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

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

Answer 2

这样做 -

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

Answer 3

试试这个：

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

Answer 4

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

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

但这里的问题是它在行动结束后解雇了这个事件。所以所有的伤害都已经完成了。

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

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

Answer 5

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

似乎有用

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

5 个答案: