Наведение CSS на ios работает, только если назначен прослушиватель событий

Я столкнулся со странной проблемой. Я создал раскрывающееся меню css из элемента выбора раскрывающегося списка с помощью js. И, похоже, он отлично работает в большинстве браузеров, кроме устройств ios. Когда я навожу раскрывающийся список div; Событие hover css не запускается на устройствах ios, но если я добавлю прослушиватель событий в раскрывающийся список без каких-либо действий в прослушивателе, событие hover начнет работать.

Вот мой код для редактирования: http://codepen.io/kuldeepdaftary/pen/jKeDi

для тестирования: http://codepen.io/kuldeepdaftary/full/jKeDi

Попробуйте прокомментировать следующий фрагмент в JS:

  $('.dropdown').click(function(){});

как только вы прокомментируете часть выше! Css hover больше не будет работать в iphone/ipad, но как только вы раскомментируете его, он будет работать нормально.

Поскольку функция списка событий clickevent пуста! Я не понимаю, что решает проблему?


ios event-listener jquery css hover
person Kuldeep Daftary    schedule 05.02.2013    source источник
comment
Как именно вы наводите что-то на устройстве iOS?   -  person BoltClock    schedule 05.02.2013
comment
Если у элемента есть событие :hover, то при первом касании iOS рендеринг :hover, при втором касании событие щелчка повышения   -  person Kuldeep Daftary    schedule 05.02.2013

Ответы (2)


arrow_upward
2
arrow_downward

На устройствах iOS нет события наведения. Прежде всего, выделите логику отображения и скрытия раскрывающегося списка в отдельную функцию. Тогда вы должны подойти к этому, исходя из возможностей, доступных вам в браузере.

if ('ontouchstart' in document.documentElement) {
  $(".dropdown").click(hoverFunction);
} else {
  $(".dropdown").hover(hoverFunction);
}

Возможно, стоит отметить, что вы можете добиться функциональности раскрывающегося списка, используя только CSS, и в этом случае для вас есть решение: Раскрывающееся меню на сенсорных устройствах

person Dean    schedule 05.02.2013

arrow_upward
0
arrow_downward

OP оказался жизнеспособным решением для реализации «касания для запуска: наведение» на iOS.

Альтернатива, которую я обнаружил примерно в то же время, заключалась в том, чтобы обернуть цель в a[href=тривиальный]. В этом случае псевдоклассы цели :hover более надежно запускаются при касании в iOS.

person jerng    schedule 01.03.2015