jqueryui按钮单选很难通过长时间的鼠标点击来选择

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

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

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

---

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

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

---

Edit:由于问题确实与此有关，因此在

mousedown

事件上选择一个按钮可能更容易。这是一种非标准的用户体验行为，但它应该解决按钮上的“长时间点击”问题。因此，添加以下事件处理程序将在检测到鼠标左键“down”操作时选择一个按钮-请参阅

JavaScript

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

---

我的原始答案

首先，我要使单选按钮有一个更大的目标区域。您可以将

包装在一个带有填充的

中，该填充首先允许标签文本也选择按钮，但填充提供了更多的空间，可以在其周围单击

第二，从中，您可以禁用文本选择，使移动不会取消单击

HTML

<label>Button 1 <input type="radio" name="btn" /></label>
<label>Button 2 <input type="radio" name="btn" /></label>

---

或者。这不是一个完美的解决方案，但在我有限的测试中，我发现有更多的点击被注册。

使用CSS，我真的无法再选择文本，但当我在你的小提琴上按住鼠标的同时移动光标时，按钮仍然没有被点击-（另外，按钮来自jQuery UI（只能单击label元素），它们已经相当大了。向下单击文本，在按钮文本上移动鼠标，然后向上单击（仍然在文本上）正在Chrome 26中为我选择一个按钮。很抱歉，错过了您正在使用jQueryUI单选按钮的事实。我将尝试用这些按钮给出更相关的答案。@s1lv3r我已经用jQueryUI单选按钮的替代解决方案编辑了我的答案。谢了，这解决了问题。谢谢！顺便说一下，您的JS示例中有一个输入错误：使用

event

而不是

e

。实际上，在单击输入元素本身时，似乎根本不会出现此问题，而仅在单击连接的标签元素时才会出现。而且在jQuery UI中，您只能单击标签；很可能是鼠标移动错误，很难将鼠标按住那么长时间而不移动标签单像素。这可能是一个更相关的问题：

<label>Button 1 <input type="radio" name="btn" /></label>
<label>Button 2 <input type="radio" name="btn" /></label>

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