Обновление содержимого всплывающей подсказки JQueryUI в режиме реального времени на мобильных устройствах

У меня есть кнопка подписки/отписки, и я использую всплывающие подсказки пользовательского интерфейса jQuery для отображения заголовка кнопки. Когда кнопка нажата, я немедленно меняю заголовок кнопки + обновляю всплывающую подсказку (без необходимости пользователю отводить мышь и повторно наводить курсор на кнопку) следующим образом:

el.title = 'Follow';
$('#follow').tooltip("option", "content", "Follow");
$(this).mouseover();

Есть ли способ воспроизвести это поведение на мобильных устройствах? А если нет, есть ли лучший способ немедленно обновить содержимое всплывающей подсказки, которое будет работать как для настольных компьютеров, так и для мобильных устройств?


jquery jquery-ui jquery-ui-tooltip
person larissa    schedule 29.04.2015    source источник
comment
вы тестировали его на мобильном устройстве.. он также будет работать на мобильном устройстве   -  person Dalvik    schedule 29.04.2015
comment
@RahulMishra это работает непоследовательно на мобильных устройствах - при первом нажатии кнопки всплывающая подсказка не обновляется, как только всплывающая подсказка закрывается и кнопка нажимается еще несколько раз, да, это работает, но большинство пользователей не будут быстро переключаться назад и так далее, поэтому мне неудобно говорить, что это работает.   -  person larissa    schedule 29.04.2015

Ответы (2)


arrow_upward
2
arrow_downward

На мобильных устройствах вам может потребоваться прибегнуть к сенсорным событиям для полной согласованности. «Клик» на мобильном телефоне фактически эмулируется; он синтезируется из касания, за которым следует касание того же элемента. События mouseover/in и mouseexit/leave/out не являются стартовыми в сенсорных устройствах.

Я бы попробовал прикрепить последовательность кода, которую вы включили выше, не только к событию щелчка, но и к событию касания.

Дополнительные сведения об API сенсорных событий см. на MDN (https://developer.mozilla.org/en-US/docs/Web/API/Touch_events); У Apple, пожалуй, самый старый такой документ (https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html). На последней странице также есть информация о том, как сенсорное устройство «выводит» некоторые традиционные события мыши.

person Dondi    schedule 29.04.2015
comment
Хотя эта ссылка может ответить на вопрос, лучше включить сюда основные части ответа и предоставить ссылку для справки. Ответы только по ссылкам могут стать недействительными, если связанная страница изменится. - person abarisone; 29.04.2015
comment
Основные части ответа были в исходном первом абзаце и первом предложении второго; ссылки были для дополнительной справки на случай, если потребуются дополнительные сведения об API. Я отредактировал ответ, чтобы более четко разделить эти разделы. - person Dondi; 29.04.2015

arrow_upward
1
arrow_downward

В итоге я изменил способ изменения текста всплывающей подсказки на

$('#follow').tooltip("option", "content", "Follow");
$("#follow").data("ui-tooltip-title", "Follow");
$(".ui-tooltip-content").html($("#follow").data("ui-tooltip-title"));

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

person larissa    schedule 30.04.2015