JQuery UI Button Radio hard to choose Long mouse clicks

Question

We just build the page using jQuery UI switches, and when we tested the user interface, we realized some strange behavior.

Some users have problems activating radio buttons when pressed. In particular, it turns out that they tend to make a long click (for example, holding the left mouse button for +250 ms) and that they cannot hold the mouse in the exact position during this time. When they move the cursor one pixel in this time, browsers seem to switch to text selection mode. At the end, the click event does not fire, and the button is not selected. Some people took 5-6 attempts to select it.

I was curious to test this with my father (60+), and it seems that he is somewhat unable to use any site with such buttons in the usual way (he makes very long clicks - for example, holds the mouse button for a full second :-) .

I wonder if someone had this problem in the past and if there is any solution? Can I turn off text highlighting for my buttons?

Answer 1

Edit: Since the problem is really related to jQueryUI radio buttons , it would be easier to select mousedown on the event. This is non-standard UX behavior, but it should bypass the “long clicks” on the button. Thus, adding the following event handler will select the button when the "down" action of the left mouse button is detected - see the updated demo .

Javascript

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

---

My original answer

First, I will make the switches have a large target area. You can wrap <input> in <label> with an add-on that, firstly, allows the label text to also select a button, but the add-on gives even more space around which you can click.

Secondly, from How do I turn off text selection highlighting using CSS? , you can turn off the text selection so that the movement does not cancel the click.

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 the (original) demo . This is not an ideal solution, but in my limited testing I find that more clicks are logged.

Answer 2

Perhaps you can try using the jquery mouseup () event. This will allow you to select the current radio button to determine how many times you click on it. Here is an example ( JsFiddle ):

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