Планшеты зависают при первом клике, кликают при втором клике

Публикация этого вопроса в основном в надежде подтвердить мои подозрения о поведении и, таким образом, задокументировать его для других программистов. (Поскольку я не нашел записи об этом нигде в Интернете)

У меня есть сайт, который я создаю, навигационная панель которого имеет следующие свойства: Горизонтальная секция представляет собой <ul> из <li>, а некоторые из <li> имеют оба:

  • Элемент n<a> приведет вас к этой теме.

  • Селектор CSS при наведении, который запускает display:block в подменю — вложенный <ul>, который затем опускается вертикально вниз.

На рабочем столе все это ведет себя так, как я и ожидал: при наведении на ключевой элемент открывается подменю, а при нажатии на него выполняется событие щелчка (в данном случае это обычная ссылка <a>.

Но на устройстве iOS (проверено на Air, Mini, iPhone 6) я обнаружил, что однократное касание открывает подменю, а повторное касание (когда подменю открыто) вызывает ссылку на управляющий элемент.

Длительное нажатие вызовет «контекстное меню ссылки».

Это именно то, что я хотел сделать, и это ОТЛИЧНО! Но я не знаю, ПОЧЕМУ он это делает. В то время как меню основано на Bootstrap, но я не могу найти ни одного бутстрапа, который это делает.

В настоящее время я думаю, что iOS Safari имеет какой-то волшебный код, который добавляет это (очевидно желательное) поведение, решая, что если у вас есть элемент с :hover CSS (или, я думаю, связанный обработчик события onhover), а также связанный обработчик события click, тогда первое касание вызовет и будет вызывать событие наведения, а второе касание вызовет событие щелчка.

Вопрос:

  1. Кто-нибудь знает, с уверенностью, что является источником такого поведения.

  2. Может ли кто-нибудь найти документацию об этом поведении!?

  3. Хотели бы люди поделиться другими платформами, на которых это работает/не работает (планшеты Android? планшеты Windows? старые iOS?)


ios click css hover tablet
person Brondahl    schedule 30.03.2015    source источник
comment
я полагаю, что ваши ключевые слова — «события касания», см. для начала разработчик. mozilla.org/en-US/docs/Web/API/Touch_events   -  person G-Cyrillus    schedule 30.03.2015
comment
@GCyrillus Я согласен, что события касания являются хорошим описанием того, что вызывает взаимодействие. Но я ничего не регистрировал! (как и Booststrap, AFAICT)   -  person Brondahl    schedule 30.03.2015

Ответы (1)


arrow_upward
6
arrow_downward

  1. Поведение, вызывающее срабатывание кликабельного элемента, такого как якорная ссылка, только при втором касании в iOS, описано в этом post Николаса С. Закаса (@slicknet). То, что вызывает двойное касание, это:

:hover Правило, которое либо скрывает, либо показывает другой элемент, используя видимость или отображение.

e.g.

<style>
    p span {
        display: none;
    }

    p:hover span {
        display: inline;
    }
</style>
<p><a href="/">Tap me</a><span>You tapped!</span></p>

  1. Apple также предоставляет документацию по обработке событий для справки.

  2. Никакие другие платформы этого не делают. Это специфично для iOS, по крайней мере, с версии 5 (вероятно, с версии 1). Поскольку он не является кроссплатформенным, для Android и других сенсорных устройств он должен обрабатываться по-разному и требует отмены событий щелчка и т. д. с помощью JS. Пока мне это удалось. Я думаю, будет справедливо сказать, что для панелей меню навигации CSS очень сложно работать с элементами-переключателями, которые являются одновременно ссылками и переключателями, в сенсорной среде.

person hexalys    schedule 19.06.2015