jQuery UI切换按钮（复选框）点击/拖动错误

Question

jQuery UI切换按钮（复选框）点击/拖动错误

jqueryjquery-uibuttonclickdrag

8

我将发布这篇文章，并附上我想到的最佳答案。我没有找到任何类似的问题，所以就来吧。

当将类型为复选框的输入转换为jquery ui按钮时，我观察到（其他人也是如此），只有在点击时鼠标完全静止才会注册点击。任何移动都不会发生任何事情。对于用户来说，这只能被认为是不可靠的行为。

其他人如何解决这个问题（在chrome 14和ie 8中使用jquery 1.6.3/jquery ui 1.8.16观察到这种行为）？是否有什么明显的东西我错过了，因为我必须付出如此大的努力才能得到预期的行为？

- LOAS

我也建议使用以下任一解决方案： http://ultcombo.github.io/UltButtons/ 或者 https://dev59.com/xWsy5IYBdhLWcg3w-i7h#16540688 - phazei

6个回答

1

虽然这是一个旧的问题，但我想发布这篇文章，因为我有同样的问题并且找到了这里 --- 通过在Firefox中展示http://jqueryui.com/button/#radio演示的jQuery UI按钮的行为，似乎在v1.10.4中已经解决。这是错误票证 - http://bugs.jqueryui.com/ticket/7665。这是v1.10.4的更新日志 - http://jqueryui.com/changelog/1.10.4/

修复：单选按钮和复选框忽略小鼠标移动的点击。（#7665, 52e0f76）

仍然有一个问题没有解决，即无法触发单击事件。

- Michael K

0

我在使用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中它能够完美运行。

- semmelbroesel

0

我也刚刚发现了这个问题。尽管在某些浏览器中，Jquery UI 可能已经修复了这个问题，但在 Firefox 中仍然存在问题。从我所看到的情况来看，如果您在移动鼠标时单击按钮，则按钮颜色会更改，但“input”的实际值永远不会更改。因此，您不能使用“Change”事件，而必须使用“Click”事件，并查看它是否实际更改。我所做的是在单击事件发生时包含一个刷新。因此，如果输入值与按钮不同，则对用户来说，它看起来就像他们从未单击过它。

$(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"); 
});

- scud42

0

我知道这是一个非常老的问题，而且已经被修复了，但我发现这是唯一对我有效的解决方法：

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

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

- aohm1989

0

实际上，1.8.13及之前的版本存在一个错误。如果你点击一个按钮并移动/拖动鼠标，按钮在视觉上会显示为选中状态，但是底层的复选框/单选框并没有被选中。因此，发送到服务器的表单数据与用户所看到的不一致。

从1.8.14版本开始，该错误得到了修复。不过，缺点是你必须保持鼠标静止。请记住这一点，如果你决定使用较旧版本的jquery-ui。

- Michal B.

有人知道为什么会发生这种情况吗？我尝试将 unselectable 类添加到 UI 代码中，但没有帮助。 - m3div0

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

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

- LOAS · Accepted Answer

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

我在标签上附加了一个点击监听器，并自己处理状态改变。我还发现需要防止在切换按钮上选择文本。这是通过 CSS 实现的（在 SO 的其他地方找到）。

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

也许这能帮助下一个想使用jquery ui开关按钮的人节省时间和烦恼。如果有更好/更简洁的解决方案，我非常感兴趣！