Нажмите Задержка на 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...
});

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

Том

Answer 3

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

ссылка на стек

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

Answer 4

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

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

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

   Большинство из этих библиотек создают новое событие под названием 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, поскольку это остановит функциональность по умолчанию, такую ​​как копирование / вставка, выбор текста и т. д.