Радиокнопку пользовательского интерфейса jQuery сложно выбрать, если щелкнуть мышью

Мы просто создаем страницу с использованием переключателей jQuery UI, и во время тестирования UI мы обнаружили странное поведение.

У некоторых пользователей возникают проблемы с активацией переключателей при нажатии. В частности, оказывается, что они, как правило, делают длинный щелчок (например, удерживая левую кнопку мыши в течение +250 мс) и что они не могут удерживать мышь в точном положении в течение этого времени. По мере того, как они перемещают курсор на один пиксель за это время, браузеры, похоже, переходят в режим выделения текста. В конце концов, событие щелчка не срабатывает, и кнопка не выбирается. Некоторым нужно 5-6 попыток, чтобы выбрать его.

Мне было любопытно, и я проверил это с моим отцом (60+), и кажется, что он не может нормально использовать любой сайт с такими кнопками (он делает очень длинные клики - например, удерживает кнопку мыши нажатой целую секунду).:-).

Интересно, была ли у кого-нибудь эта проблема в прошлом и есть ли решение? Могу ли я отключить выбор текста для моих кнопок?

Источник

2 ответа

Решение

Редактировать: поскольку проблема действительно связана с переключателями jQueryUI, может быть проще выбрать кнопку на mousedown событие. Это нестандартное поведение UX, но оно должно обходить "длинные щелчки" на кнопке. Таким образом, добавление следующего обработчика событий выберет кнопку при обнаружении действия левой кнопки мыши "вниз" - см. Обновленную демонстрацию.

JavaScript

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

Мой оригинальный ответ

Во-первых, я бы сделал так, чтобы переключатели имели большую целевую область. Вы могли бы обернуть <input> в <label> с отступом, который вначале позволяет тексту метки также выбирать кнопку, но отступ дает еще больше места, по которому можно щелкнуть.

Во-вторых, из Как отключить подсветку выделения текста с помощью CSS? Вы можете отключить выделение текста, позволяя движению не отменять нажатие.

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

Или посмотрите (оригинал) демо. Это не идеальное решение, но в моем ограниченном тестировании я обнаружил, что регистрируется больше кликов.

Источник

Может быть, вы могли бы попробовать использовать событие jupery mouseup(). Это позволит вам выбрать текущий переключатель независимо от того, сколько раз вы нажимаете на него. Вот пример ( JsFiddle):

$(function() {
    $("input[type='radio']").mouseup(function(){
        $(this).prop("checked", true);
    });
});
Источник
Другие вопросы по тегам