Jquery的UI切換按鈕（複選框）點擊/拖動錯誤

Question

我發佈此與我已經拿出的最佳答案一起。我還沒有發現任何類似的問題，所以在這裏。

當類型複選框的輸入轉換爲jQuery UI按鈕時，我觀察到（如others）它只在鼠標單擊時保持完全靜止時纔會註冊點擊。任何運動什麼都不會發生。對用戶來說，這隻能被視爲片狀和不可靠的行爲。

其他人如何解決這個問題（用jquery 1.6.3/jquery ui 1.8.16在chrome 14和ie 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

實際上，在1.8.13和以前的版本中有一個bug。如果你點擊一個按鈕並移動/拖動你的光標，那麼一個按鈕在視覺上會獲得一個選定的狀態，但是底層的複選框/收音機沒有被選中。因此，發送到服務器的表單數據與用戶看到的表單數據不一致。

從版本1.8.14開始，此錯誤即告解決。缺點是你必須保持鼠標不動。記住這一點，如果你決定使用舊版本的jquery-ui。

Answer 3

我知道這是一個非常古老的問題，並一直固定的，但我發現這是隻爲我工作的修補程序：

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

希望jQuery將很快解決實際問題。

Answer 4

我有一個類似的情況使用引導框架，我發現的解決方案根本不好，但它確實爲我做了竅門。

我必須手動添加到每個參與元件下面的代碼：

.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添加它a按鈕被創建：

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

但它只是不工作 - 它顯然必須直接添加到元素。

正如我所說，並不漂亮，但至少在Firefox中它像一個魅力。

Answer 5

老問題，但我只是以爲我會發布這個，因爲我有同樣的問題，並讓我的方式在這裏---從使用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）

仍然有一個問題，它沒有點燃點擊事件。

Answer 6

我剛剛遇到這個。看起來好像儘管這可能會在一些瀏覽器的JQuery UI中修復，但它仍然在Firefox中失敗。從我所看到的，如果您在移動鼠標的同時單擊按鈕，按鈕顏色會改變，但「輸入」的實際值永遠不會改變。所以你不能使用「更改」事件，而是必須使用「點擊」事件，看看它是否真的發生了變化。我所做的是在發生點擊事件時包含刷新權限。因此，如果輸入值與按鈕不同，則它看起來像用戶從未點擊過它。

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