Ngăn chặn lỗi nhấp đúp với hộp kiểm + kết hợp nhãn

Question

Lưu ý rằng vấn đề này có thể không áp dụng cho công chúng, vì nó không xảy ra trừ khi bạn là người nhấp nhanh. (150-200ms/click) Lý do tôi đăng vấn đề này là vì ứng dụng của tôi có biểu mẫu với hơn 20 hộp kiểm cạnh nhau và sau khi nghiên cứu sâu rộng, tôi không tìm thấy câu hỏi nào liên quan đến vấn đề này.

Dưới đây là một kịch bản đơn giản - 4 hộp kiểm và 4 nhãn, một cho mỗi id hộp kiểm:

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

Giả sử trong mỗi trường hợp tất cả các NHTM là không được kiểm soát.

mong đợi Hành vi:

1. tôi bấm vào 4 NHTM trong kế nhanh chóng, tất cả họ sẽ trở thành kiểm tra. (đúng)
2. Tôi nhấp vào 4 Nhãn liên tiếp nhanh chóng và các CB tương ứng sẽ được chọn. (Chỉ đúng đối với Chrome, nhưng vẫn không tối ưu)

hành vi thực tế đối với trường hợp 2 trên Win 7 (nhấp vào nhãn, bởi vì như bạn đã biết, nhãn lớn và phong cách thể, và các hộp kiểm là rất nhỏ và hệ điều hành phụ thuộc):

1. (Trong Firefox 19) CB2 và CB4 còn lại được kiểm soát, và trong khi đi xuống trong danh sách từ "Label" được đánh dấu cho Nhãn 2 và Label 4, như thể tôi đúp nhấp về họ.
2. (Trong Chrome 26) Tất cả CB được kiểm tra chính xác, nhưng trong khi đi xuống danh sách từ "Nhãn" được tô sáng cho Nhãn 2 và Nhãn 4, như thể tôi đã nhấp đúp vào chúng.
3. (Trong IE 10) CB2 và CB4 không được chọn, nhưng không đánh dấu sai.

Hành vi sai lầm có thể được biện minh nếu các nhấp chuột trên cùng một phần tử. Trong trường hợp của chúng tôi, đó là những hộp kiểm rõ ràng duy nhất với các ID và Tên khác nhau. Vì vậy, kết quả là cực kỳ bất ngờ.

Vì vậy, câu hỏi của tôi là:

Có cách nào để vô hiệu hóa bắn sự kiện click đôi khi tôi nhanh chóng bấm vào hộp kiểm khác nhau, nhưng vẫn chưa kiểm tra xem chúng với vài cú click đơn nhanh?

Gần nhất tôi đã đến là kịch bản sau đây, mà thú vị khiến Firefox cư xử như Chrome và Chrome cư xử như Firefox:

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

Answer 1

Cuối cùng có một bản hack rất xấu làm việc cho tất cả các trình duyệt, hy vọng thi s sẽ giúp bất kỳ ai khác đi qua các vấn đề:

Disable lựa chọn với css bởi vì làm nó trong JS chỉ đơn giản là quá kém hiệu quả:

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

ngăn chặn tất cả nhấp trong JS, và tự làm những gì nhấp phải làm:

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

này sẽ làm nó-

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

Answer 3

Thử này:

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

Tôi cũng đang đối mặt với một vấn đề tương tự đã khiến tôi mất cả đêm để biết cách khắc phục điều này. Tôi cũng đã nghe sự kiện 'dblclick' để ngăn chặn bất kỳ hành động nào xảy ra khi nhấp đúp vào hộp kiểm. ví dụ:

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

Nhưng vấn đề ở đây là nó đã kích hoạt sự kiện sau khi thực hiện hành động. Vì vậy, tất cả các thiệt hại đã được thực hiện.

Có một cách rất đơn giản để giải quyết vấn đề này là bằng cách lắng nghe sự kiện 'thay đổi' thay vì nghe 'nhấp'. Trong trường hợp này, chúng tôi đang kích hoạt sự kiện khi có sự thay đổi trạng thái từ kiểm tra để bỏ chọn hoặc không được chọn để kiểm tra chứ không phải khi nhấp hoặc nhấp đúp.

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

Answer 5

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

dường như làm việc