ejemplos - La radio del botón jQuery UI es difícil de seleccionar al hacer clics largos con el mouse

tooltip jquery ui ejemplos

Question

Estamos construyendo una página con el uso de los botones de radio de la interfaz de usuario jQuery y nos dimos cuenta de un comportamiento extraño mientras realizábamos la prueba de UI.

Algunos de los usuarios tienen problemas para activar los botones de radio haciendo clic. Particularmente, resulta que tienden a hacer un clic largo (como mantener presionado el botón izquierdo del mouse durante +250 ms) y que no pueden mantener el mouse en la posición exacta dentro de este tiempo. A medida que mueven el cursor por un píxel dentro de ese tiempo, los navegadores parecen cambiar al modo de selección de texto. Al final, el evento click no se activa y el botón no se selecciona. Algunas personas necesitaron de 5 a 6 intentos para que sea seleccionado.

Tenía curiosidad y probé esto con mi padre (más de 60) y parece que de alguna manera no puede usar ningún sitio con esos botones de forma normal (hace clics extremadamente largos, como mantener presionado el botón del mouse durante un segundo completo :-).

Me pregunto si alguien tuvo este problema en el pasado y si hay alguna solución. ¿Puedo deshabilitar la selección de texto para mis botones?

Answer 1

Tal vez podrías intentar usar el evento jquery mouseup () . Le permitirá seleccionar el botón de opción actual sin importar cuántas veces haga clic en él. Aquí hay un ejemplo ( JsFiddle ):

$(function() {
    $("input[type=''radio'']").mouseup(function(){
        $(this).prop("checked", true);
    });
});

Answer 2

Editar: Dado que el problema es realmente acerca de los botones de radio jQueryUI , podría ser simplemente más fácil seleccionar un botón en el evento de mousedown . Es un comportamiento de UX no estándar, pero debería ofrecer "clics largos" en el botón. Por lo tanto, al agregar el siguiente controlador de eventos, se seleccionará un botón cuando se detecte la acción "abajo" del botón izquierdo del mouse; consulte la demostración actualizada .

JavaScript

$(''label'').on(''mousedown'', function(event) {
    switch (event.which) {
        case 1:
            $(this).click();
    }
});

Mi respuesta original

En primer lugar, haría que los botones de radio tengan un área objetivo más grande. Puede envolver la <input> en una <label> con relleno, que primero permite que el texto de la etiqueta también seleccione el botón, pero el relleno proporciona aún más espacio alrededor del cual se puede hacer clic.

En segundo lugar, ¿Cómo deshabilitar resaltar la selección de texto usando CSS? , puede desactivar la selección de texto, permitiendo que el movimiento no cancele el clic.

HTML

<label>Button 1 <input type="radio" name="btn" /></label>
<label>Button 2 <input type="radio" name="btn" /></label>

CSS

label {
    padding:0 10px;
    border:1px dotted lightblue;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

O vea la demo (original) . No es una solución perfecta , pero en mis pruebas limitadas descubro que se están registrando más clics .