Nút chuyển đổi giao diện người dùng Jquery (hộp kiểm) nhấp/kéo lỗi

Question

Tôi đăng bài này cùng với câu trả lời hay nhất mà tôi đã đưa ra. Tôi đã không tìm thấy bất kỳ câu hỏi tương tự, vì vậy ở đây đi.

Khi hộp kiểm đầu vào loại được chuyển thành nút jquery ui, tôi đã quan sát (như có others) rằng nó chỉ đăng ký nhấp chuột nếu chuột được giữ hoàn toàn trong khi nhấp. Bất kỳ chuyển động gì-đến-bao giờ và không có gì xảy ra. Đối với người dùng, điều này chỉ có thể được coi là hành vi không ổn định và không đáng tin cậy.

Làm cách nào để những người khác làm việc xung quanh hành vi này (được quan sát với jquery 1.6.3/jquery ui 1.8.16 trong chrome 14 và ie 8)? Có điều gì rõ ràng tôi đang thiếu vì tôi phải đi đến độ dài như vậy để có được hành vi mong đợi?

Answer 1

Tôi có ý tưởng về việc này từ một báo cáo vấn đề trên trang jquery ui liên quan đến ở trên, nhưng nó cần một chút công việc: jsfiddle

tôi đính kèm một người biết lắng nghe nhấp chuột trên nhãn và xử lý các thay đổi trạng thái riêng tôi. Tôi cũng thấy cần thiết để ngăn việc lựa chọn văn bản trên nút bật tắt. Điều này được thực hiện với css (được tìm thấy ở nơi khác trên SO)

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

Có thể điều này có thể cứu người tiếp theo muốn sử dụng nút chuyển đổi jquery ui một thời gian và đau buồn. Nếu ai có một giải pháp tốt hơn/sạch hơn, tôi rất quan tâm!

Answer 2

Thực ra, có lỗi trong phiên bản 1.8.13 và các phiên bản trước. Nếu bạn bấm vào một nút và di chuyển/kéo con trỏ của bạn, sau đó một nút trực quan được một trạng thái được chọn, nhưng hộp kiểm/radio bên dưới không được chọn. Kết quả là, dữ liệu biểu mẫu được gửi tới máy chủ không phù hợp với những gì người dùng nhìn thấy.

Từ phiên bản 1.8.14 lỗi này được giải quyết. Nhược điểm là bạn phải giữ chuột của bạn vẫn còn. Hãy ghi nhớ điều đó, nếu bạn quyết định sử dụng phiên bản cũ hơn của jquery-ui.

Answer 3

Tôi biết đây là một câu hỏi thực sự cũ, và từ đó đã được cố định, nhưng tôi thấy điều này là việc sửa chữa duy nhất mà làm việc cho tôi:

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

Hy vọng rằng jQuery sẽ khắc phục vấn đề thực tế sớm .

Answer 4

Tôi có một tình huống tương tự bằng cách sử dụng khung công tác khởi động và giải pháp mà tôi thấy không hề đẹp, nhưng nó thực hiện thủ thuật cho tôi.

tôi phải tự thêm vào mọi yếu tố liên quan đến đoạn mã sau:

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

Ví dụ: Trong JavaScript, khi tôi sử dụng jquery để thêm các nút vào một hộp thoại:

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

hoặc trong HTML:

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

Tôi đã thử thêm nó bằng jQuery các nút đã được tạo:

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

nhưng nó không hoạt động - dường như nó phải được thêm trực tiếp vào phần tử.

Như tôi đã nói, không đẹp, nhưng ít nhất trong Firefox, nó hoạt động như một sự quyến rũ.

Answer 5

Câu hỏi cũ, nhưng tôi chỉ nghĩ rằng tôi đã đăng bài này vì tôi có cùng một câu hỏi và thực hiện theo cách của mình ở đây --- Đánh giá hành vi của các nút giao diện người dùng jQuery thể hiện trong bản demo tại đây http://jqueryui.com/button/#radio bằng Firefox đã được sửa trong v1.10.4. Đây là vé lỗi - http://bugs.jqueryui.com/ticket/7665. Và đây là thay đổi đối với v1.10.4 - http://jqueryui.com/changelog/1.10.4/

Đã sửa lỗi: bỏ qua các lần di chuyển chuột nhỏ. (# 7665, 52e0f76)

Vẫn còn một câu hỏi không kích hoạt sự kiện nhấp chuột.

Answer 6

Tôi cũng bắt gặp điều này. Dường như mặc dù điều này có thể được sửa trong giao diện người dùng Jquery với một số trình duyệt, nó vẫn không thành công trong Firefox. Từ những gì tôi đã nhìn thấy, nếu bạn nhấp vào nút trong khi di chuyển chuột, nút màu thay đổi, nhưng giá trị thực tế của "đầu vào" không bao giờ thay đổi. Vì vậy, bạn không thể sử dụng sự kiện "Thay đổi", nhưng thay vào đó phải sử dụng sự kiện "Nhấp" và xem sự kiện đó có thực sự thay đổi hay không. Những gì tôi đã làm là bao gồm một refresh ngay khi sự kiện click xảy ra. Do đó, nếu giá trị đầu vào khác với nút, nó sẽ hiển thị cho người dùng vì họ chưa bao giờ nhấp vào nó.

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