La prévention double-cliquez sur un bug avec la case à cocher + étiquette combinaison

Remarque: ce problème peut ne pas s'appliquer pour le grand public, car il ne se produit pas, sauf si vous êtes un rapide clicker. (150-200 ms/souris) La raison pour laquelle je vais poster cette question c'est parce que ma demande a un formulaire avec+ de 20 cases à cocher en regard les uns des autres, et après de longues recherches j'ai trouvé pas de questions sur ce sujet.

Voici un scénario simplifié - 4 cases et 4 étiquettes, une pour chaque case id:

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

Suppose, dans chaque cas, tous les CBs sont décochées.

Comportement Attendu:

Je clique sur le 4 CBs en succession rapide, ils deviendront tous vérifiés. (vrai)
Je clique sur les 4 Étiquettes en succession rapide, et le correspondant de CBs devenir vérifié. (uniquement pour Chrome, mais pas encore optimale)

Comportement Réel pour le cas 2 sur Win 7 (en cliquant sur les étiquettes, parce que comme vous le savez, les étiquettes sont de grande taille et de style, et les cases sont de minuscules et d'OS-dépendant):

(Dans Firefox 19) et CB2 et CB4 sont laissés sans surveillance, et en allant en bas de la liste le mot "Label" est accentué pour l'Étiquette 2 et 4, comme si je double clique sur eux.
(Dans Chrome 26) Toutes les CBs obtenir correctement vérifiée, mais en allant en bas de la liste le mot "Label" est accentué pour l'Étiquette 2 et 4, comme si je double clique sur eux.
(IE 10) et CB2 et CB4 sont laissés sans surveillance, mais pas de fausse évidence.

L'erreur de comportement pourrait être justifiée si les clics sont sur le même élément. Dans notre cas, ceux-ci sont clairement unique cases avec différents Identifiants et les Noms. Si les résultats sont vraiment inattendu.

Donc ma question est:

Est-il un moyen de désactiver le tir à la double-cliquez sur l'événement quand j'ai rapidement cliquez sur les différentes cases, mais encore de les consulter avec rapide unique clics?

Le plus proche que je suis venu à est le script suivant, ce qui est intéressant, Firefox se comporter comme le Chrome et Chrome se comporter comme Firefox:

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

OriginalL'auteur Scott Yang | 2013-04-06

7

Finalement obtenu un très vilain hack qui a travaillé pour tous les navigateurs, j'espère que cela va aider quelqu'un d'autre qui vient sur le problème:

Désactiver la sélection avec les css parce que le faire en JS est tout simplement trop inefficace:
```
.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;
}
```
Prévenir TOUS cliquant en JS, et de faire manuellement ce que cliquant devrait le faire:
```
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();
})
```
S'il vous plaît ne laissez-moi savoir si tout simple approché fonctionne. Pour mes tests, les autres suggestions impliquant double clic ne fonctionne pas.

OriginalL'auteur Scott Yang
1

Cela ferait-
```
$("input[type='checkbox']").dblclick(function (event)
{
    event.preventDefault();
});
```
Merci pour la réponse rapide, je devrais probablement avoir mentionné ci-dessus, mais c'était ma tentative d'origine et il n'a rien fait du tout dans firefox. Je vais encore upvote votre réponse car elle n'aide avec google Chrome.
Edit: Sur test de plus il n'a rien fait parce qu'il n'était pas attaché à l'étiquette. Même alors qu'il est fixé à l'étiquette de Chrome se contentait de faire ce qu'il faisait avant...

OriginalL'auteur Kevin Lynch

Essayez ceci:

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

Tout essayé pour les 2 dernières heures, ont finalement abandonné et qu'ils ont fait un TRÈS VILAIN hack. En raison de l'preventDefault sur dblclick ne semble pas faire quoi que ce soit - le plus probable c'est un Windows question.

OriginalL'auteur palaѕн

0

J'ai également été confronté à un problème similaire qui m'a fait passer toute la nuit sur la façon dont cela peut être fixée pour une case à cocher. J'ai été également l'écoute de la "double clic" de l'événement pour éviter toute action se passe sur le double clic sur une case à cocher.
ex:
```
#(".some_class").on("dblclick",function(event){
event.preventDefault();
});
```
Mais le problème, c'est que c'était le tir de l'événement après l'action a été effectuée. De sorte que tout le mal était déjà fait.

Il y a un moyen très simple de s'attaquer à ce problème qui est à l'écoute de l'événement "changement" au lieu de l'écoute de "clic". Dans cette été nous sommes le déclenchement de l'événement quand il y a un changement d'état de case à cochée ou de non cochée cochée et non pas sur cliquez ou double-cliquez.
```
#(".some_class").on("change",function(event){
event.preventDefault();
});
```
OriginalL'auteur The_Fresher

-1

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

semble fonctionner

OriginalL'auteur Leo Tahk

Vous devez vous connecter pour publier un commentaire.