jQuery UI按钮单选在长时间鼠标点击时难以选择

Question

jQuery UI按钮单选在长时间鼠标点击时难以选择

jqueryjquery-uiuser-interfaceuser-controlswebusercontrols

4

我们正在使用jQuery UI单选按钮构建页面，但在进行UI测试时发现一些奇怪的行为。

一些用户在点击时无法激活单选按钮。特别是，他们倾向于长时间按住鼠标左键（如超过250毫秒），而且他们无法在此期间保持鼠标的精确位置。当他们在此期间将光标移动一个像素时，浏览器似乎会切换到文本选择模式。最终，点击事件未触发，按钮未被选中。有些人需要尝试5-6次才能选中它。

我很好奇并与我父亲（60+）进行了测试，结果他似乎无法以正常方式使用任何带有此类按钮的网站（他会非常长时间地按下鼠标按钮，如一整秒钟：-）。

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

- s1lv3r

很可能是鼠标移动的错误，很难让鼠标按下那么长时间而不移动一个像素。这可能是一个更相关的问题：https://dev59.com/I1zUa4cB1Zd3GeqPywLR - phazei

2个回答

0

也许你可以尝试使用 mouseup() jQuery 事件。它将允许你选择当前的单选按钮，无论你点击多少次。这里有一个例子（JsFiddle）：

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

- 0x9BD0

1

实际上，当单击输入元素本身时，似乎根本不会出现此问题，但仅在单击连接的标签元素时才会出现。而在jQuery UI中，您只能单击标签；http://jqueryui.com/button/#radio - s1lv3r

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- andyb · Accepted Answer

编辑：由于问题实际上与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;
}

或者查看（原始）演示。虽然不是一个完美的解决方案，但在我的有限测试中，我发现有更多的点击被注册。