jQuery UI Button Radio is Hard to Select Doing Long Mouse Clicks

Question

We are just building a page with using jQuery UI radio buttons and we realized some strange behavior while doing UI testing.

Some of the users have problems activing the radio buttons through clicking. Particularly, it turns out that they tend to make a long click (like holding the left mouse button for +250 ms) and that they are not able to keep the mouse in the exact position within this time. As they move the cursor for one pixel within that time the browsers seems to change to text selection mode. In the end the click event isn't triggered and the button doesn't get selected. Some people needed 5-6 attempts to get it selected.

I was curious and tested this with my dad (60+) and it seems that he is somewhat unable to use any site with such buttons in a normal way (he is making extremely long clicks - like holding the mouse button down for a full second :-).

I wonder, if anybody had this problem in the past and if there is any solution? Can I disable text-selection for my buttons?

It's likely it's a mouse movement bug, hard to keep the mouse down that long and not have it move a single pixel. This might be a more relevant question: http://stackoverflow.com/questions/7687480/jquery-ui-toggle-button-checkbox-click-drag-bug — phazei, Oct 11 '13 at 22:11

score 2 · Accepted Answer · edited May 23 '17 at 11:43

Edit: Since the problem is really about jQueryUI radio buttons, it might be just easier to select a button on the mousedown event. It's non-standard UX behaviour but it should workaround "long clicks" on the button. So adding the following event handler will choose a button when the left mouse button "down" action is detected - see updated demo.

JavaScript

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

My original answer

Firstly, I'd make the radio buttons have a larger target area. You could wrap the <input> in a <label> with padding which firstly allows the label text to also select the button but the padding gives even more space around which can be clicked on.

Secondly, from How to disable text selection highlighting using CSS?, you can disable the text selection, allowing movement to not cancel the clicking.

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

Or see (original) demo. It's not a perfect solution but in my limited testing I'm finding more clicks are being registered.

With your CSS I'm really not able to select the text anymore, but the button still doesn't get clicked when I'm moving the cursor while holding the mouse down in your fiddle. :-( Also the buttons are from jQuery UI (it's only possible to click the label element) and they are already pretty large. — s1lv3r, May 17 '13 at 16:24
Down clicking on the text, moving the mouse across the button text and up clicking (still on the text) is selecting a button for me in Chrome 26. Sorry missed the fact that you are using jQueryUI radio buttons. I'll try to give a more relevant answer with those buttons. — andyb, May 17 '13 at 16:31
@s1lv3r I've edited my answer with an alternate solution for jQueryUI radio buttons — andyb, May 17 '13 at 20:45
Hey Andy, this fixes the problem. Thank you! By the way you have a typo in your JS example: using `event` instead of `e`. — s1lv3r, May 21 '13 at 10:34

score 0 · Answer 2 · answered May 17 '13 at 16:15

0

Maybe you could try using the mouseup() jquery event. It will permit you to select the current radio button no mather how many time you click it. Here is an example (JsFiddle):

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

answered May 17 '13 at 16:15

0x9BD0

1,542
18
41

1

Actually it seems that this problem doesn't occur at all when clicking the input element itself, but only when clicking on a connected label element. And in jQuery UI you only have the label to click on; http://jqueryui.com/button/#radio – s1lv3r May 17 '13 at 16:27

jQuery UI Button Radio is Hard to Select Doing Long Mouse Clicks

2 Answers2