Zapobieganie błędowi dwukrotnego kliknięcia przy użyciu kombinacji pole wyboru i etykieta

Question

Uwaga ten problem może nie dotyczyć opinii publicznej, ponieważ nie występuje, chyba że jesteś szybkim kliknięciem. (150-200ms/kliknięcie) Powodem, dla którego publikuję ten problem jest to, że moja aplikacja ma formularz z 20+ polami wyboru obok siebie, a po szeroko zakrojonych badaniach nie znalazłem żadnych powiązanych pytań na ten temat.

Oto uproszczony scenariusz - 4 pól i 4 etykiety, po jednym dla każdego ID checkbox:

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

Przyjmijmy, w każdym przypadku wszystkich BC są zaznaczone.

oczekiwane zachowanie:

1. klikam na 4 BC w krótkim odstępie czasu, wszystkie one stają się sprawdził. (true)
2. Klikam na 4 Etykiety w krótkim odstępie czasu, a odpowiednie CB zostają sprawdzone. (Prawdziwe tylko dla Chrome, ale nadal nie jest optymalny)

rzeczywiste zachowanie dla przypadku 2 na Win 7 (klikając na etykietach, bo jak wiesz, etykiety są duże i styl-stanie i pola wyboru są małe i OS-zależne):

1. (w Firefoksie 19) CB2 i CB4 są pozostawione bez kontroli, a idąc w dół listy słowo „Label” zostanie podświetlony na etykieta 2 i etykiety 4, jakbym podwójnym kliknięciu na nich.
2. (W Chrome 26) Wszystkie jednostki certyfikujące są poprawnie sprawdzane, ale podczas wchodzenia na listę słowo "etykieta" zostaje podświetlone dla etykiety 2 i etykiety 4, tak jakbym dwukrotnie je kliknął.
3. (W IE 10) CB2 i CB4 pozostają niezaznaczone, ale bez podświetlania podświetlonego.

Błędne zachowanie może być uzasadnione, jeśli kliknięcia są na tym samym elemencie. W naszym przypadku są to wyraźnie unikalne pola wyboru z różnymi identyfikatorami i nazwami. Wyniki są więc zaskakująco niespodziewane.

Więc moje pytanie brzmi:

Czy istnieje sposób Wyłącz wypalanie kliknij dwukrotnie zdarzenie, kiedy szybko kliknij na różnych wyboru, ale wciąż jeszcze sprawdzić je z szybkich pojedynczych kliknięć?

Najbliżej Doszedłem do jest następujący skrypt, który ciekawie wykonane Firefox zachowywać się jak Chrome i Chrome zachowuje się jak Firefox:

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

Answer 1

W końcu dostałem jeden bardzo brzydki hack, który działał dla wszystkich przeglądarek, miejmy nadzieję, że s pomoże nikogo, kto natknie się na problem:

Wyłącz wybór z CSS ponieważ robi to w JS jest po prostu zbyt nieefektywne:

.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; 
} 

zapobiec wszystkim kliknięcie w JS i ręcznie robić to, co kliknięcie powinno zrobić:

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

byłoby to zrobić to-

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

Answer 3

Try to:

$(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

Miałem też do czynienia z podobnym problemem, który kazał mi spędzić całą noc na tym, jak można to naprawić na checkbox. Słuchałem również zdarzenia "dblclick", aby zapobiec wszelkim działaniom po dwukrotnym kliknięciu pola wyboru. ex:

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

Ale problemem było to, że po wypaleniu zdarzenie akcja została wykonana. Więc wszystkie obrażenia zostały już wykonane.

Istnieje bardzo prosty sposób na rozwiązanie tego problemu, polegający na słuchaniu "zmiany" wydarzenia zamiast słuchania "kliknięcia". W tym celu uruchamiamy zdarzenie, gdy następuje zmiana stanu z wyboru na niezaznaczone lub odznaczone na sprawdzone, a nie kliknięcie lub podwójne kliknięcie.

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

Answer 5

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

wydaje się działać