Большинство сенсорных мобильных браузеров ждут 300 мс между нажатием на экран и браузером, запускающим соответствующий обработчик для этого события. Это было реализовано, потому что вы можете дважды нажать, чтобы увеличить страницу до полной ширины. Поэтому браузер ждет треть секунды — если вы не нажмете снова, «щелчок» активируется.
Задержка была разумной мерой предосторожности в дни, предшествующие отзывчивому веб-дизайну и масштабированию с использованием мультитач-пинч К сожалению, сейчас это одна из основных причин, по которой пользователи считают веб-приложения медленнее и менее функциональными, чем собственные альтернативы. Так что мы можем сделать с задержкой?
1. Не волнуйтесь об этом
Будет ли задержка в 300 мс зависеть от вашего приложения и целевой аудитории. Например, веб-сайт только для контента со стандартным навигационным меню вряд ли будет затронут, поскольку пользователи тратят больше времени на чтение текста, чем на взаимодействие с элементами управления.
2. Отключить масштабирование (Chrome и Firefox)
Chrome и Firefox на Android не будут ждать 300 мс, если масштабирование было отключено с помощью следующей настройки области просмотра в вашей HTML- head :
<meta name="viewport" content="width=device-width, user-scalable=no">
или
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
Однако это решение не работает в Safari и вызывает некоторые проблемы с доступностью для людей с нарушениями зрения или моторики. К счастью, поставщики начали решать эту проблему …
3. Установите область просмотра на ширину устройства (Chrome 32+)
В Chrome 32 установка ширины области просмотра на значение, меньшее или равное ширине устройства, отключит масштабирование двойным касанием. Возможно, у вас уже есть соответствующая настройка в заголовке HTML вашего адаптивного сайта, например
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=3">
4. Используйте PointerEvents (IE10 +)
Microsoft решила много проблем, связанных с касанием, в спецификации PointerEvents . Например, событие pointerup не будет pointerup если пользователь прокручивает страницу.
Существует также нестандартное CSS- свойство touch-action, которое позволяет убрать задержку для определенных элементов или всего документа без отключения масштабирования:
a, button, .myelements { -ms-touch-action: manipulation; /* IE10 */ touch-action: manipulation; /* IE11+ */ }
Я надеюсь, что другие поставщики примут PointerEvents, но не затаить дыхание.
5. Реализовать обработчики событий
В отличие от click и touchstart touchend события touchstart touchend мгновенно без задержки touchstart touchend . Это может быть полезно, если вы разрабатываете WebGL или игру на основе холста только для touchend , однако вы не можете полагаться исключительно на touchend к стандартным веб-страницам, поскольку:
- Пользователь, запускающий
touchstartна другом элементе дляtouchendне долженtouchendщелчок. - Пользователь
touchstartзатем достаточно большоеtouchmoveпередtouchendсобытияtouchend— щелчок не должен выполняться. - Для тех, кто использует устройства без сенсорного ввода, вам все еще требуются стандартные обработчики щелчков, но будьте осторожны, если вы запускаете одно и то же событие дважды.
Нам есть с чем бороться, но для нас проделана тяжелая работа:
- FastClick от FT Labs подключает соответствующих слушателей к мобильным браузерам, когда они требуются, то есть решения 2-4 выше не использовались. Сценарий сжимается до 10 КБ.
- Tappy! от Filament Group — нормализованная библиотека событий крана, похожая по концепции на PointerEvents, которая сжимается до 1Kb.
Имейте в виду, что добавление обработчиков событий к нескольким элементам отрицательно скажется на производительности. Это может быть хуже, чем проблема с задержкой 300 мс, которую вы пытаетесь решить.
Оптимальное решение?
Ситуация беспорядочная, и разработчикам нелегко создать кросс-браузерное решение. Я не уверен, что это то, что нам нужно решать в каждом приложении, так как это специфичная для браузера политика, которой должны заниматься поставщики.
Установка ширины области просмотра равной device-width — самый простой вариант, поскольку вы, вероятно, уже сделали это. Он не будет работать, пока Chrome 32 не будет выпущен, но Opera, Firefox и, возможно, IE будут следовать. Я надеюсь увидеть его в Webkit, но может пройти несколько лет, прежде чем миллионы пользователей iPhone и iPad получат его.
Там мало вреда, добавляя touch-action: manipulation; свойства CSS — это будет ухудшаться изящно. Если бы PointerEvents был придуман кем-то кроме Microsoft, я уверен, что остальные поставщики последовали бы немедленно. Это спецификация W3C и часть HTML5test, поэтому, возможно, нам не придется ждать слишком долго.
Если вас беспокоит только несколько ссылок или кнопок, ваши собственные пользовательские обработчики могут быть эффективными. Для всего остального стоит рассмотреть FastClick .