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

4
votes

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?

2
jqueryjquery-uiuser-interfaceuser-controlswebusercontrols
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: stackoverflow.com/questions/7687480/… – phazei

2 Answers

2
votes

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.

0
votes

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