jQuery UI按鈕廣播很難選擇做長時間的鼠標點擊

我們只是使用jQuery UI單選按鈕構建一個頁面，我們在進行UI測試時意識到一些奇怪的行爲。jQuery UI按鈕廣播很難選擇做長時間的鼠標點擊

部分用戶在單擊時啓動單選按鈕時出現問題。特別是，它表明它們傾向於進行長時間的點擊（例如，按住鼠標左鍵達到+250毫秒），並且他們無法在此時間內將鼠標保持在確切的位置。當他們在這段時間內將光標移動一個像素時，瀏覽器似乎變爲文本選擇模式。最後，點擊事件不會被觸發，並且按鈕不會被選中。有些人需要5-6次嘗試才能選中它。

我很好奇，並與我的父親（60+）進行了測試，似乎他有點無法以正常的方式使用這些按鈕的任何網站（他正在做非常長的點擊 - 就像按住鼠標按鈕整整一秒鐘:-)。

我想知道，如果有人過去有這個問題，並且有什麼解決方案嗎？我可以禁用我的按鈕的文本選擇嗎？

來源

2013-05-17 s1lv3r

這很可能是一個鼠標移動錯誤，很難將鼠標停留很長時間並且沒有移動一個像素。這可能是一個更相關的問題：http://stackoverflow.com/questions/7687480/jquery-ui-toggle-button-checkbox-click-drag-bug – phazei

編輯：由於這個問題實際上是關於jQueryUI radio buttons，它可能只是更容易選擇在mousedown事件的按鈕。這是非標準的用戶體驗行爲，但它應該解決按鈕上的「長時間點擊」問題。因此，添加以下事件處理程序將在檢測到鼠標左鍵「向下」操作時選擇一個按鈕 - 請參閱updated demo。

的JavaScript

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

我原來的答覆

首先，我會做的單選按鈕有一個更大的目標區域。您可以將<input>封裝在<label>中，其中填充首先允許標籤文本也選擇該按鈕，但填充會提供更多空間可供點擊。

其次，從How to disable text selection highlighting using 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; 
}

或者see (original) demo。這不是一個完美解決方案，但在我的有限測試中，我發現更多點擊正在註冊。

來源

2013-05-17 16:19:09 andyb

隨着你的CSS我真的不能夠選擇文本了，但當我移動光標的同時按住鼠標的時候，按鈕仍然不會被點擊你的小提琴。 :-( 此外，按鈕來自jQuery UI（它只能點擊標籤元素），而且它們已經很大。 – s1lv3r

向下單擊文本，將鼠標移動到按鈕文本上並向上單擊（仍然在文本）在Chrome 26中爲我選擇了一個按鈕。對不起，我錯過了使用jQueryUI單選按鈕的事實，我會嘗試給出與這些按鈕更相關的答案。 – andyb

@ s1lv3r我已經編輯了我的答案解決方案爲jQueryUI單選按鈕 – andyb

也許你可以嘗試使用mouseup（） jquery事件。它將允許您選擇當前的單選按鈕，無需點擊多少次。下面是一個例子（JsFiddle）：

$(function() { 
    $("input[type='radio']").mouseup(function(){ 
     $(this).prop("checked", true); 
    }); 
});

來源

2013-05-17 16:15:40 Philibobby

事實上，似乎這個問題不會發生在點擊輸入元素本身，但只有當點擊一個連接的標籤元素。而在jQuery UI中，你只需要點擊標籤; http://jqueryui.com/button/#radio – s1lv3r

jQuery UI按鈕廣播很難選擇做長時間的鼠標點擊

回答

相關問題