JQuery UI кнопка переключения (флажок) ошибка щелчка / перетаскивания

Question

Я отправляю это вместе с лучшим ответом, который я придумал.Подобных вопросов я не нашел, поэтому здесь идет речь.

Когда флажок ввода типа преобразуется в кнопку пользовательского интерфейса jquery, я заметил (как и others ), что это толькорегистрирует щелчок, если во время щелчка мышь остается полностью неподвижной.Никаких движений как никогда и ничего не происходит.Для пользователя это может восприниматься только как ненадежное и ненадежное поведение.

Как другие обходят это поведение (наблюдается в jquery 1.6.3 / jquery ui 1.8.16 в chrome 14 и т. Е. 8)?Есть ли что-то очевидное, чего мне не хватает, так как я должен идти на все, чтобы получить ожидаемое поведение?

Answer 1

Идея этого обходного пути пришла из отчета о проблеме на странице пользовательского интерфейса jquery, на которую ссылается выше, но потребовалось немного работы: 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, показанных в демо здесь 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/

Исправлено: переключатели и флажки игнорируют щелчки мыши для незначительных движений мыши. (# 7665, 52e0f76)

Тем не менее, все еще остается вопрос о том, чтобы не запускать событие click.

Answer 3

Я только что столкнулся с этим. Кажется, что, хотя это может быть исправлено в пользовательском интерфейсе Jquery с некоторыми браузерами, в Firefox все равно происходит сбой. Из того, что я видел, если вы нажмете кнопку во время перемещения мыши, цвет кнопки изменится, но фактическое значение «input» никогда не изменится. Таким образом, вы не можете использовать событие «Изменить», но вместо этого вы должны использовать событие «Клик» и посмотреть, действительно ли оно меняется. Что я сделал, так это включил обновление прямо, когда происходит событие 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"); 
});

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 после того, как кнопки были созданы:

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

, но он просто не работает - его, очевидно, нужно добавить непосредственно к элементу.

Как я уже говорилНе очень, но, по крайней мере, в Firefox он работает как шарм.

Answer 5

Я знаю, что это действительно старый вопрос, и с тех пор он был исправлен, но я нашел, что это единственное исправление, которое сработало для меня:

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

Надеюсь, jQuery скоро исправит проблему.

Answer 6

На самом деле, есть ошибка в 1.8.13 и предыдущих версиях. Если вы нажимаете на кнопку и перемещаете / перетаскиваете курсор, то кнопка визуально получает выбранное состояние, но соответствующий флажок / радио не выбран. Как следствие, данные формы, отправленные на сервер, не соответствуют тому, что видит пользователь.

Начиная с версии 1.8.14 эта ошибка устранена. Недостатком является то, что вы должны держать мышь на месте. Имейте это в виду, если вы решите использовать более старую версию jquery-ui.