проблема двойного щелчка на iPad / iPhone

Question

У меня проблема, очень похожая на Проблема зависания iPad / iPhone заставляет пользователя дважды щелкнуть ссылку , когда пользователь, нажимающий ссылку, должен нажать дважды, чтобы фактически перейти к ней.

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

Есть ли способ сохранить ссылки, чтобы им нужно было всего одно нажатие, но если они прокручиваются, не перенаправляйте страницу?

Answer 1

Вот что я в итоге сделал:

Проблема в том, что touchstart и touchend знают только о событиях касания, а не о событиях прокрутки, поэтому они реагируют только на запуск касания и завершение касания. То, что мы должны сделать, это различить прокрутку и не прокрутку. Вот что я сделал:

$('a')
    .live('touchstart', function(){
        isScrolling = false;
    })
    .live('touchmove', function(e){
        isScrolling = true;
    })
    .live('touchend', function(e){
        if( !isScrolling )
        {
            window.location = $(this).attr('href');
        }
    });

Это делает эти вещи по порядку:

1. Когда сенсор записывается впервые, установите isScrolling на false.
2. Когда сенсор перемещается, установите isScrolling в true. Этого не произойдет, если касание не двигается.
3. Если касание остановлено, и прокрутка не произошла, перенаправьте страницу на ссылку.

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

Answer 2

Мой совет:

• Добавление эффектов наведения на touchstart и mouseenter.
• Удаление эффектов наведения на mouseleave, touchmove и click.

Это похоже на ответ Джейка, но устраняет необходимость эмулировать событие щелчка.

Фон

Для симуляции мыши браузеры, такие как мобильный Webkit, запускают следующие события, если пользователь касается и отпускает палец на сенсорном экране (например, iPad) (источник: Touch And Mouse на html5rocks.com ):

1. touchstart
2. touchmove
3. touchend
4. Задержка 300 мс, когда браузер проверяет, что это одно касание, а не двойное нажатие
5. mouseover
6. mouseenter
   • Примечание : Если событие mouseover, mouseenter или mousemove изменяет содержимое страницы, следующие события никогда не запускаются.
7. mousemove
8. mousedown
9. mouseup
10. click

Невозможно просто сказать браузеру пропустить события мыши.

Что еще хуже, если событие наведения курсора изменяет содержимое страницы, событие щелчка никогда не запускается, как описано в Руководство по веб-контенту Safari - Обработка событий , в частности рисунок 6.4 в One-Finger События . Что именно означает «изменение контента», будет зависеть от браузера и версии. Я обнаружил, что для iOS 7.0 изменение цвета фона не является (или больше не?) Изменением содержимого.

Решение объяснено

Подведем итог:

• Добавление эффектов наведения на touchstart и mouseenter.
• Убрать эффекты наведения на mouseleave, touchmove и click.

Обратите внимание, что на touchend!

нет никаких действий

Это явно работает для событий мыши: mouseenter и mouseleave (слегка улучшенные версии mouseover и mouseout) запускаются, а также добавляют и удаляют наведение.

Если пользователь на самом деле click ссылается, эффект наведения также удаляется. Это гарантирует, что оно будет удалено, если пользователь нажмет кнопку «Назад» в веб-браузере.

Это также работает для сенсорных событий: на touchstart добавлен эффект наведения. Это '' 'not' '' удалено на touchend. Он снова добавляется в mouseenter, и, поскольку это не вызывает изменений содержимого (оно уже было добавлено), также запускается событие click, и по ссылке следует переходить без необходимости повторного нажатия пользователем!

Задержка в 300 мс, которую браузер имеет между событием touchstart и click, фактически используется надлежащим образом, поскольку эффект наведения будет отображаться в течение этого короткого времени.

Если пользователь решит отменить щелчок, движение пальца сделает это так же, как обычно. Обычно это проблема, поскольку событие mouseleave не запускается и эффект наведения остается на месте. К счастью, это можно легко исправить, убрав эффект наведения на touchmove.

Вот и все!

Обратите внимание, что можно удалить задержку в 300 мс, например, с помощью библиотеки FastClick , но это выходит за рамки этого вопроса.

Альтернативные решения

Я обнаружил следующие проблемы со следующими альтернативами:

• Обнаружение браузера: Чрезвычайно подвержен ошибкам. Предполагается, что на устройстве есть либо мышь, либо сенсорный экран, в то время как комбинация того и другого будет становиться все более распространенной, когда сенсорный дисплей будет распространяться.
• Обнаружение мультимедиа в CSS: Единственное решение только для CSS, о котором я знаю. По-прежнему подвержен ошибкам и предполагает, что на устройстве есть либо мышь, либо сенсорный экран, хотя возможны оба варианта.
• Эмулировать событие щелчка в touchend: Это приведет к неправильному переходу по ссылке, даже если пользователь только хотел прокрутить или увеличить масштаб, без намерения фактически щелкнуть ссылку.
• Использовать переменную для подавления событий мыши: Устанавливает переменную в touchend, которая используется в качестве условия if в последующих событиях мыши, чтобы предотвратить изменения состояния в этот момент времени. Переменная сбрасывается в событии щелчка. Это достойное решение, если вы действительно не хотите, чтобы на сенсорных интерфейсах был эффект наведения. К сожалению, это не работает, если touchend запускается по другой причине, и не происходит событие щелчка (например, пользователь прокручивал или масштабировал) и впоследствии пытается перейти по ссылке с помощью мыши (то есть на устройстве с обеими мышами). и сенсорный интерфейс).

Дальнейшее чтение

• http://jsfiddle.net/macfreek/24Z5M/. Проверьте вышеупомянутое решение для себя в этой песочнице.
• http://www.macfreek.nl/memory/Touch_and_mouse_with_hover_effects_in_a_web_browser. Тот же самый ответ, с немного большим фоном.
• http://www.html5rocks.com/en/mobile/touchandmouse/. Отличная справочная статья на html5rocks.com о сенсорном мышлении в целом.
• https://developer.apple.com/library/ios/DOCUMENTATION/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html. Руководство по веб-контенту Safari - Обработка событий. В частности, см. Рисунок 6.4, который объясняет, что никакие дальнейшие события не запускаются после изменения содержимого во время события mouseover или mousemove.

См. Также Отключение эффектов наведения в мобильных браузерах .

Answer 3

Если ваш контент в формате UIScrollView, вы можете (или, возможно, уже) реализовали UIScrollViewDelegate;который содержит следующий метод:

-(void)scrollViewDidScroll: (UIScrollView*)scrollView

Если вы используете это, и получите следующее:

float offset = scrollView.contentOffset.y;

if (offset > 0)
    // then we have started to scroll

Если вы используете это условие в сочетании с определением количества нажатий / нажатий в настоящее времяна экране (т. е. только один в вашем случае) затем игнорируйте любые звонки с переадресацией (если> 1 нажатие), которые могут произойти при нажатии на ссылку.

Надеюсь, это поможет!