Question

我发布这个以及我提出的最佳答案。我没有发现任何类似的问题，所以这里就是。

当类型复选框的输入被转换为jquery ui按钮时，我观察到（如others所示）如果鼠标在点击时保持完全静止，它只会注册一次点击。任何运动都是如此，没有任何反应。对于用户来说，这只能被视为片状和不可靠的行为。

其他人如何解决这种行为（用chrome 14中的jquery 1.6.3 / jquery ui 1.8.16和8进行观察）？是否有一些明显的东西我不知道，因为我必须达到预期的行为？

Answer 1

我从上面链接的jquery ui页面的问题报告中得到了这个解决方法的想法，但它需要一些工作：jsfiddle

我在标签上附加了一个点击监听器，并自己处理状态更改。我还发现有必要阻止切换按钮上的文本选择。这是用css完成的（在SO的其他地方找到）

.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   user-select: none;   
}

也许这可以保存下一个想要使用jquery ui切换按钮的人一段时间和悲伤。如果有人有更好/更清洁的解决方案，我很感兴趣！

Answer 2

老问题，但我只是想我发布这个，因为我有同样的问题，并在这里做了我的方式---根据演示中演示的jQuery UI按钮的行为来判断http://jqueryui.com/button/#radio使用Firefox，似乎已在v1.10.4中修复。这是错误罚单 - http://bugs.jqueryui.com/ticket/7665。这是v1.10.4的更改日志 - http://jqueryui.com/changelog/1.10.4/

修正：单选按钮＆amp;复选框忽略鼠标点击以进行轻微的鼠标移动。（＃7665,52e0f76）

但仍有一个问题是它没有触发点击事件。

Answer 3

实际上，1.8.13和之前版本中存在一个错误。如果单击按钮并移动/拖动光标，则按钮可视地获得选定状态，但未选中基础复选框/无线电。因此，发送到服务器的表单数据与用户看到的不一致。

从版本1.8.14开始，此错误已解决。缺点是你必须保持鼠标静止。请记住，如果您决定使用旧版本的jquery-ui。

Answer 4

我知道这是一个非常古老的问题，并且已经修复，但我发现这是唯一对我有用的修复：

http://ultcombo.github.com/UltButtons/

希望jQuery能尽快解决实际问题。

Answer 5

我使用bootstrap框架有类似的情况，我找到的解决方案根本不是很好，但它确实对我有用。

我必须手动向每个涉及的元素添加以下代码：

.on('mousedown', function(event) { event.preventDefault ? event.preventDefault() : event.returnValue = false })

实施例：在JavaScript中，当我使用jquery将按钮添加到对话框中时：

.append($(document.createElement('a'))
    .attr({'class': 'btn', 'href': '#'})
    .append($(document.createTextNode('1')))
    .on('mousedown', function(event) { event.preventDefault ? event.preventDefault() : event.returnValue = false })
)

或HTML中的内联：

<a class="btn" href="#" onmousedown="event.preventDefault ? event.preventDefault() : event.returnValue = false" onclick="UseButton(this); return false;" >1</a>

我在创建按钮后尝试使用jQuery添加它：

.on('mousedown', 'a.btn', function(ev) { ev.preventDefault [...] } )

但它不起作用 - 显然必须直接添加到元素中。

正如我所说的那样，并不漂亮，但至少在Firefox中，它就像一个魅力。

Answer 6

我也遇到了这个问题。虽然这可能会在Jquery UI中使用某些浏览器修复，但它仍然在Firefox中失败。从我所看到的情况来看，如果在移动鼠标时单击按钮，按钮颜色会发生变化，但实际值为＆＃34;输入＆＃34;从不改变。因此，您无法使用＆＃34;更改＆＃34;事件，但必须使用＆＃34;点击＆＃34;事件，看看它是否真的发生了变化。我所做的是在点击事件发生时包括刷新权限。因此，如果输入值与按钮不同，则它会向用户显示，因为他们从未点击过它。

$(function() { $( "#myButtonSet" ).buttonset(); });
$('#myButtonSet').on('click',function(){
      //This will reset the button back to it's original state if the input does not 
      //match what the user clicked. It is so fast that it seems to the user they never 
      //clicked the button at all, prompting them to do it again.
    $("input[name='myButtonSetName']").button("refresh"); 
});

Jquery UI切换按钮（复选框）单击/拖动bug

6 个答案: