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

请注意，此问题可能不适用于普通大众，因为除非您是快速点击器，否则不会发生此问题。（150-200ms/click）我发布这个问题的原因是因为我的应用程序有一个表格，每个表格有20个以上的复选框，经过大量的研究后，我发现在这个问题上没有相关的问题。使用复选框+标签组合防止双击错误

这里有一个简单的场景 - 4个复选框和4个标签，每个复选框ID：

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

假设在每种情况下的所有认证机构都听之任之。

预期的行为：

我快速连续上4个可转债按一下，他们都将成为检查。（true）
我快速连续点击4个标签，并且相应的CB被检查。（仅适用于Chrome的真，但仍然不是最佳）

的情况下2 Win 7的实际行为（点击标签，因为你知道，标签是大和风格的，还复选框是微小和OS相关的）：

（在Firefox 19）CB2和CB4都听之任之，虽然下降列表中的单词“标签”被突出了标签2和标签4，因为如果我双击在他们。
（在Chrome 26中）所有CB都得到了正确检查，但是在列表中，标签2和标签4突出显示单词“标签”，就好像我双击它们一样。
（在IE 10中）CB2和CB4未被选中，但没有错误突出显示。

如果点击位于同一元素上，错误的行为可能是合理的。在我们的例子中，这些显然是唯一的复选框，它们使用不同的ID和名称。所以结果是非常意外的。

所以我的问题是：

有没有一种方法来禁用烧成双击事件时，我迅速点击不同的复选框，但仍然具有快速单次点击检查呢？

我来最接近的是下面的脚本，这有趣的制作火狐表现得如Chrome，而Chrome的行为，例如Firefox：

jQuery(document).on('dblclick', 'input:checkbox+label', function(event){ 
    console.log('ugly hack fired'); 
    $(this).click(); 
    event.preventDefault(); 
})

来源

2013-04-06 Scott Yang

终于拿到一个非常丑陋的黑客攻击，对所有浏览器的工作，希望THI旨意帮助别人谁越过问题就来了：

禁用选择使用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-06 11:30:15

请让我知道，如果任何简单的接近将工作。根据我的测试，涉及dblclick的其他建议无效。 – 2013-04-06 11:32:00

这将做它 -

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

来源

2013-04-06 10:39:07 Vector

感谢您的快速响应，那恐怕是上面提到的这一点，但是这是我最初的尝试，它在Firefox做什么都没有。由于Chrome确实有帮助，因此我仍然会提高您的答案。 – 2013-04-06 10:43:04

编辑：在进一步的测试中，它没有做任何事情，因为它没有附加到标签。即使附加到标签Chrome只是做它以前做的事情... – 2013-04-06 10:48:37

尝试这样的：

$(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-06 11:08:59

过去2个小时一直在尝试一切，最后放弃了，只是做了一个非常可怕的黑客攻击。原因是dblclick上的preventDefault似乎没有任何作用 - 很可能这是Windows问题。 – 2013-04-06 11:26:41

我也面临类似的问题，我花了整晚如何可以解决复选框。我还在倾听'dblclick'事件以防止双击复选框时发生任何操作。例如：

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

但这里的问题是，它触发事件的动作做了。所有的伤害都已经完成了。

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

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

来源

2017-02-17 05:48:21

-1

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

似乎工作

来源

2017-02-24 14:17:46

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

回答

相关问题