Нажмите Задержка на IPhone и подавление фокуса ввода

Question

Браузер webkit на iphone имеет задержку 300 мс между тем, когда пользователь делает касание, и когда javascript получает событие щелчка.Это происходит потому, что браузер должен проверить, сделал ли пользователь двойное касание.Мое приложение не позволяет изменять масштаб, поэтому двойное касание для меня бесполезно.У ряда людей есть предлагаемые решения для этой проблемы, и они обычно включают обработку «щелчка» по событию касания и затем игнорирование щелчка, генерируемого браузером.Однако кажется невозможным подавить щелчок, который отправляется элементу ввода.Это может вызвать проблему, если у вас есть диалоговое окно, которое открывается над формой, а затем пользователь нажимает кнопку закрытия, а его щелчок перенаправляется на элемент ввода при исчезновении формы.

Пример с jqtouch (только для iphone)

Answer 1

Мы с коллегами разработали библиотеку с открытым исходным кодом FastClick для избавления от задержки нажатия в Mobile Safari. Он преобразует прикосновения в щелчки и обрабатывает эти специальные случаи для элементов input и select.

Это так же просто, как создать его на теле следующим образом: new FastClick(document.body), а затем прослушивать события щелчка как обычно.

Answer 2

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

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

Я лично использовал это в своем приложении для iPhone на базе PhoneGap html / js, и оно работало идеально. Единственное решение, чтобы дать это почти родное чувство.

Теперь по поводу вашей проблемы - вы пытались остановить распространение события? Это должно решить вашу проблему.

$('.button').bind('touchstart', function(e){
    e.stopPropagation();
    // do something...
});

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

Tom

Answer 3

Я вижу две проблемы в вопросе. Один из них обрабатывает задержку щелчка, а другой - фокус ввода. Да, оба из них должны быть правильно обработаны в мобильном Интернете.

1. Задержка клика имеет более глубокие причины. Причина этой задержки 300 мс очень хорошо объяснена в этой статье. Отзывчивость на событие клика.

   К счастью, эта проблема хорошо известна и решается многими библиотеками. JQTouch , JQuery Mobile , JQuery.tappable , Mootools-мобиля , и накладной

   Большинство этих библиотек создают новое событие под названием tap. Вы можете использовать событие нажатия, похожее на событие нажатия. Это может помочь обработка событий jquery-mobile.

    $("#tappableElement").tap(function(){
      // provide your implementation here. this is executed immediately without the 300ms delay.
    });
   

2. Теперь вторая проблема связана с обработкой фокуса ввода. Здесь также есть заметная задержка. Эту проблему можно решить, заставив сразу сосредоточиться на элементе для одного из событий прикосновения или касания. Эта обработка событий JQuery может помочь.

   $('#focusElement').bind('touchstart', function(e){
       $(this).focus();
   });
   
   $('#focusElement').focus(function(e){
       // do your work here.
   });
   

   Вы можете выполнить e.stopPropagation в обработке событий «touchstart», чтобы избежать распространения. Но я бы настоятельно рекомендовал не возвращать ложное; или e.preventDefault, так как это остановит функции по умолчанию, такие как копирование / вставка, выделение текста и т. д.

Answer 4

Я сделал FastClick Мэтта плагином jquery:

ссылка на стек-поток

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