jQuery UI按钮收音机很难选择做长鼠标点击

2023年6月10日 183次阅读

我们只是使用jQuery UI单选按钮构建页面,我们在进行UI测试时意识到了一些奇怪的行为.

一些用户通过点击激活单选按钮时出现问题.特别是,事实证明它们倾向于长按(例如按住鼠标左键250毫秒)并且它们无法在此时间内将鼠标保持在准确位置.当他们在该时间内将光标移动一个像素时,浏览器似乎更改为文本选择模式.最后,不会触发click事件,也不会选择该按钮.有些人需要5-6次尝试才能将其选中.

我很好奇并且和我爸爸一起测试了这个(60)并且看起来他有点无法以正常的方式使用任何带有这些按钮的网站(他正在进行非常长的点击 – 就像按住鼠标按钮一整秒： – ).

我想知道,过去是否有人遇到这个问题,是否有任何解决方案？我可以禁用按钮的文本选择吗？

最佳答案 编辑：由于问题实际上是关于
jQueryUI radio buttons,因此在mousedown事件上选择按钮可能更容易.这是非标准的用户体验行为,但它应该解决按钮上的“长按”问题.因此,当检测到鼠标左键“向下”操作时,添加以下事件处理程序将选择一个按钮 – 请参阅
updated demo.

JavaScript的

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

我原来的答案

首先,我要使单选按钮具有更大的目标区域.你可以包装< input>在< label>中使用填充,首先允许标签文本也选择按钮,但填充提供更多的空间,可以点击周围.

其次,从How to disable text selection highlighting using 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;
}

或者see (original) demo.这不是一个完美的解决方案,但在我的有限测试中,我发现更多的点击正在注册.

点赞