4

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

一些用户在通过单击激活单选按钮时遇到问题。特别是，他们倾向于进行长按（例如按住鼠标左键 +250 毫秒），并且他们无法在这段时间内将鼠标保持在准确的位置。当他们在那段时间内将光标移动一个像素时，浏览器似乎更改为文本选择模式。最后，点击事件没有被触发，按钮也没有被选中。有些人需要 5-6 次尝试才能选择它。

我很好奇，并与我父亲（60 岁以上）一起对此进行了测试，他似乎无法以正常方式使用任何带有此类按钮的网站（他进行了极长的点击 - 就像按住鼠标按钮整整一秒钟） :-)。

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

4

2 回答 2

2

编辑：由于问题实际上与jQueryUI 单选按钮有关，因此选择mousedown事件上的按钮可能更容易。这是非标准的用户体验行为，但它应该解决按钮上的“长按”问题。因此，当检测到鼠标左键“向下”动作时，添加以下事件处理程序将选择一个按钮 - 请参阅更新的演示。

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

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

于 2013-05-17T16:19:09.377 回答
0

也许您可以尝试使用mouseup() jquery 事件。它将允许您选择当前单选按钮，无论您单击它多少次。这是一个示例（JsFiddle）：

$(function() {
    $("input[type='radio']").mouseup(function(){
        $(this).prop("checked", true);
    });
});
于 2013-05-17T16:15:40.523 回答