Удаление задержки 300 мкс: использование fastclick.js vs с помощью ontouchstart

Ответ 1

Я работаю в Financial Times и возглавляю команду, которая создала Fastclick.js.

В принципе, все Fastclick делает привязку к событию touchend и запускает событие a click в том же элементе. Тем не менее, существует множество краевых случаев, ловушек и подводных камней, все из которых мы обнаружили, работали и запекли в fastclick. Например:

• Если вы перемещаете палец во время касания, это саблей или другой вид жестов, поэтому мы не должны реагировать
• Если вы касаетесь более чем одним пальцем за раз, мы не должны реагировать
• Если вы касаетесь текстового поля, элементу управления необходимо получить фокус, а также получить событие click
• Для некоторых элементов управления требуется собственный щелчок (для обеспечения безопасности), поэтому мы должны разрешить выборочное исключение из Fastclick
• Некоторые браузеры уже поддерживают быстрый щелчок, когда размер видового экрана по умолчанию равен device-width. Мы не должны активировать поведение Fastclick вообще в этих пользовательских агентах.

Так как Fastclick - это 1% базовая предпосылка и 99% краевых случаев, есть много альтернатив, которые меньше, включая, вероятно, тот, который вы могли бы написать сами. Но многие люди предпочитают заверения, которые приходят с использованием хорошо протестированной библиотеки.

Обратите внимание, что мы используем touchend, а не touchstart, потому что A) щелчок не запускается, пока вы не отвинтите палец от кнопки мыши или трекпада, поэтому touch должен отражать это поведение, а B), пока вы не прекратите касание мы пока не знаем, планируете ли вы перенести палец, когда он соприкасается с экраном, что было бы жестом, салфеткой или прокруткой, а не щелчком.

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

Ответ 2

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

Поскольку вы отмечаете Кордову, я предполагаю, что это гибридное приложение Cordova для мобильных устройств.
1. На Android с 2.3.x удаляется 300 мс, если вы отключите масштабирование:

<meta name="viewport" content="width=device-width, user-scalable=no" />

2. На Android с 4.4.3 (чей веб-просмотр - Chrome 33) 300 мс удаляется, если вы указываете, что страница оптимизирована для мобильных устройств:

<meta name="viewport" content="width=device-width" />

3. В IE10 + используйте CSS для удаления этой задержки:

   -ms-touch-action: манипуляция; /* IE10/
   touch-action: манипуляция; /IE 11 + */

4. В iOS вы не можете использовать видовое окно для отключения задержки 300 мс

Поэтому, чтобы удалить 300 мс, я обычно использую библиотеку кранов для крана. Например: tappy (коснитесь только), zepto touch (нажмите, проведите пальцем - хорошо, если ваш сайт уже использует zepto), hammer.js (различные жесты), в зависимости от ваших потребностей. Эти события касания не страдают от проблемы 300 мсек.

FastClick.js должен быть в порядке, хотя я еще не пробовал.

Ответ 3

Эндрю дает правильный ответ.

В общем случае

"touchstart" будет срабатывать при выполнении "click", "проведите", "прокрутить" и т.д. Однако, как вы знаете, мы хотим захватить "click".

Что FastClick.js делает, так это определение правила для "click". Например, мы могли бы установить условие ниже как "click":

В течение времени между "touchstart" и "touchhend" - 200 мс, в "touchmove" мы не находим, чтобы расстояние не было перемещено.

То же самое, мы могли бы установить условие ниже как "прокрутка":

Во время "touchstart" и "touchhend" в "touchmove" мы находим, что расстояние перемещено по оси y, но перемещение оси x не происходит.

Ответ 4

Чтобы избавиться от задержки 300 мс, выберите два варианта:

Вариант 1:

По умолчанию для события click на webview будет зафиксировано 300 мс, что приводит к в очень медленном отклике/производительности при нажатии на кнопку. Вы можете попробовать переопределить щелкните событие 'tap в jQuery Mobile, чтобы удалить задержку: (Источник: IBM)

$('btnId').on('tap', function(e) {
     e.stopImmediatePropagation();
     e.preventDefault();
     ...
});

Вариант 2: Интересный

По умолчанию JQuery Mobile CSS ввел длительную задержку - я имею в виду некоторые места 300 мс или 350 мс или 225 мс. Эти задержки могут быть оптимизированы. Я также изменил CSS по умолчанию и уменьшил длительную задержку от 350 мс до 100 мс для перехода страницы, и это было действительно здорово.

Поиск в JQuery Mobile CSS: анимация-продолжительность

JQuery Mobile 1.2.0

В некоторых местах задержка устанавливается на: -webkit-animation-duration:350ms;-moz-animation-duration:350ms в то время как другие задержки мест: -webkit-animation-duration:225ms;-moz-animation-duration:225ms

Последняя версия github:

.in {
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 350ms;
    -moz-animation-timing-function: ease-out;
    -moz-animation-duration: 350ms;
    animation-timing-function: ease-out;
    animation-duration: 350ms;
}
.out {
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 225ms;
    -moz-animation-timing-function: ease-in;
    -moz-animation-duration: 225ms;
    animation-timing-function: ease-in;
    animation-duration: 225ms;
}

Отметьте этот код github:

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

Таким образом, требуется НЕТ дополнительная библиотека

Ответ 5

Если вы перейдете на сайт, который не оптимизирован для мобильных устройств, он начинает уменьшаться, чтобы вы могли видеть полную ширину страницы. Чтобы прочитать содержимое, вы либо щелкаете масштаб, либо дважды коснитесь некоторого содержимого, чтобы увеличить его до полной ширины. Это двойное нажатие - это убийца производительности, потому что при каждом нажатии мы должны ждать, чтобы увидеть, может ли он стать двойным нажатием, и это ожидание составляет 300 мс. Вот как это происходит:

• touchstart
• touchend
• Подождите 300 мс в случае другого нажатия
• выберите

Эта пауза применяется к событиям кликов в JavaScript, но также к другим взаимодействиям на основе кликов, таким как ссылки и элементы управления формой.

http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away

Fastclick.js решает проблему, связанную, если пользователь не захотел нажимать на элемент и просто решил прокрутить.

Ответ 6

В настоящее время вы не можете использовать FastClick.js:

Примечание. На конец 2015 года большинство мобильных браузеров - особенно Chrome и Safari - больше нет задержки на 300 мс, поэтому fastclick не предлагает преимуществ для более новых браузеров и рискует ввести ошибки в ваше приложение. Внимательно изучите, действительно ли вам нужно его использовать.

(взято из: https://github.com/ftlabs/fastclick docs)