Geek asks and answers

Preventing Double-Click Error Using a Combination of Tags and Tags

Note. This problem may not apply to the general public, as it does not occur if you are not a quick clicker. (150-200ms / click) The reason why I am posting this problem is because my application has a form with 20+ flags next to each other, and after extensive research, I did not find any related questions on this issue.

Here's a simplified scenario - 4 flags and 4 labels, one for each flag identifier:

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

Assume that in each case all CBs are not marked.

Expected Behavior:

  • I quickly click on 4 CB, they will all be checked. (True)
  • I quickly click on 4 shortcuts and check the corresponding CB. (Chrome only, but still not optimal)

2 Win 7 ( , , , , ):

  • ( Firefox 19) CB2 CB4 , "Label" 2 4, .
  • ( Chrome 26) CB , "Label" 2 4, .
  • ( IE 10) CB2 CB4 , .

, . . , .

, :

, , ?

script, , Firefox Chrome, Chrome Firefox:

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

- , , , - , :

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

-

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

:

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

, , . "dblclick", - . :

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

, , . , .

, "change" 'click'. , , .

#(".some_class").on("change",function(event){
event.preventDefault();
});
0
$('.checkbox_class').click(function(event){
    if (event.ctrlKey){ event.preventDefault();
//rest of the code

,

-1

More articles:


All Articles