javascript 使用复选框+标签组合防止双击错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15849817/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Preventing double-click bug with checkbox + label combination
提问by Scott Yang
Note this issue may not apply to the general public, as it does not occur unless you're a fast clicker. (150-200ms/click)The reason I'm posting this issue is because my application has a form with 20+ checkboxes next to each other, and after extensive research I've found no related questions on this matter.
请注意，此问题可能不适用于一般公众，因为除非您是快速答题者，否则不会发生。（150-200 毫秒/点击）我发布这个问题的原因是因为我的应用程序有一个包含 20 多个复选框的表单，并且经过广泛研究，我没有发现与此相关的问题。
Here's a simplified scenario - 4 checkboxes and 4 labels, one for each checkbox id:
这是一个简化的场景 - 4 个复选框和 4 个标签，每个复选框 id 一个：
[CB1] Label 1
[CB2] Label 2
[CB3] Label 3
[CB4] Label 4
Assume in each case all CBs are unchecked.
假设在每种情况下所有 CB 都未选中。
Expected Behavior:
预期行为：
- I click on the 4 CBs in rapid succession, they will all become checked. (true)
- I click on the 4 Labels in rapid succession, and the corresponding CBs become checked. (only true for Chrome, but still not optimal)
- 我快速连续点击 4 个 CB，它们都会被选中。（真的）
- 我快速连续点击 4 个标签，相应的 CB 会被选中。（仅适用于 Chrome，但仍然不是最佳的）
Actual Behavior for case 2 on Win 7(clicking on labels, because as you know, labels are big and style-able, and the checkboxes are tiny and OS-dependent):
Win 7 上案例 2 的实际行为（单击标签，因为如您所知，标签很大且样式丰富，复选框很小且依赖于操作系统）：
- (In Firefox 19) CB2 and CB4 are left unchecked, and while going down the list the word "Label" gets highlighted for Label 2 and Label 4, as if I double-clicked on them.
- (In Chrome 26) All CBs get correctly checked, but while going down the list the word "Label" gets highlighted for Label 2 and Label 4, as if I double-clicked on them.
- (In IE 10) CB2 and CB4 are left unchecked, but no false highlighting.
- （在 Firefox 19 中）CB2 和 CB4 未选中，在向下列表时，标签 2 和标签 4 的“标签”一词会突出显示，就好像我双击了它们一样。
- （在 Chrome 26 中）所有 CB 都得到了正确检查，但是在列表中，标签 2 和标签 4 的“标签”一词会突出显示，就好像我双击了它们一样。
- （在 IE 10 中）CB2 和 CB4 未选中，但没有错误突出显示。
The erroneous behavior could be justified if the clicks are on the same element. In our case those are clearly unique checkboxes with different IDs and Names. So the results are wildly unexpected.
如果点击是在同一个元素上，则错误行为可能是合理的。在我们的例子中，这些显然是具有不同 ID 和名称的唯一复选框。所以结果出乎意料。
So my question is:
所以我的问题是：
Is there a way to disable firing the double click event when I rapidly click on the different checkboxes, but yet still check them with fast single clicks?
当我快速单击不同的复选框时，有没有办法禁用触发双击事件，但仍然通过快速单击检查它们？
The closest I've come to is the following script, which interestingly made Firefox behave like Chrome, and Chrome behave like Firefox:
我最接近的是以下脚本，有趣的是，它使 Firefox 的行为类似于 Chrome，而 Chrome 的行为类似于 Firefox：
jQuery(document).on('dblclick', 'input:checkbox+label', function(event){
console.log('ugly hack fired');
$(this).click();
event.preventDefault();
})
采纳答案by Scott Yang
Finally got one very ugly hack that worked for all the browsers, hopefully this will help anyone else who comes across the problem:
终于得到了一个适用于所有浏览器的非常丑陋的 hack，希望这能帮助遇到问题的其他人：
Disable selection with cssbecause doing it in JS is simply too inefficient:
禁用 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;
}
Prevent ALL clicking in JS, and manually do what clicking should do:
防止 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();
})
回答by Kevin Lynch
This would do it-
这样就可以了——
$("input[type='checkbox']").dblclick(function (event)
{
event.preventDefault();
});
回答by pala?н
Try this:
试试这个：
$(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
});
回答by The_Fresher
I was also facing a similar issue which had me spend whole night on how this can be fixed for checkbox. I was also listening to the 'dblclick' event to prevent any action from happening on double click on a checkbox. ex:
我也面临着一个类似的问题，这让我花了整晚的时间来研究如何修复复选框。我也在收听 'dblclick' 事件以防止在双击复选框时发生任何操作。前任：
#(".some_class").on("dblclick",function(event){
event.preventDefault();
});
But the problem here was that it was firing the event after the action was done. So all the damage was already done.
但这里的问题是它在操作完成后触发了事件。所以所有的伤害都已经造成了。
There is a very simple way to tackle this problem that is by listening for the event 'change' instead of listening to 'click'. In this was we are triggering the event when there is a state change from check to unchecked or from unchecked to checked and not on click or double click.
有一个非常简单的方法来解决这个问题，那就是监听事件 'change' 而不是监听 'click'。在这种情况下，当状态从选中变为未选中或从未选中变为选中而不是单击或双击时，我们将触发该事件。
#(".some_class").on("change",function(event){
event.preventDefault();
});
回答by Leo Tahk
$('.checkbox_class').click(function(event){
if (event.ctrlKey){ event.preventDefault();
//rest of the code
seems to work
似乎工作
