Устранение задержки 300 мс при кликах в мобильном Safari

Я читал, что мобильное Safari имеет задержку 300 мс для событий щелчка с момента нажатия ссылки / кнопки до момента срабатывания события. Причина задержки заключается в том, чтобы дождаться, чтобы увидеть, собирается ли пользователь дважды щелкнуть мышью, но с точки зрения UX ожидание 300 мс часто нежелательно.

Одним из решений для устранения этой задержки в 300 мс является использование обработки «касанием» jQuery Mobile. К сожалению, я не знаком с этим фреймворком и не хочу загружать какой-то большой фреймворк, если все, что мне нужно, это одна или две строки кода, применяемых touchendправильным образом.

Как и на многих других сайтах, на моем сайте много таких событий кликов:

$("button.submitBtn").on('click', function (e) {   
  $.ajaxSubmit({... //ajax form submisssion
});

$("a.ajax").on('click', function (e) {   
  $.ajax({... //ajax page loading
});

$("button.modal").on('click', function (e) {   
      //show/hide modal dialog
});

и что я хотел бы сделать, так это избавиться от задержки в 300 мс для ВСЕХ этих событий щелчка, используя один фрагмент кода, например:

$("a, button").on('tap', function (e) {
 $(this).trigger('click');
 e.preventDefault();
});

Это плохая / хорошая идея?

Теперь некоторые мобильные браузеры устраняют задержку нажатия 300 мс, если вы устанавливаете область просмотра. Вам больше не нужно использовать обходные пути.

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

В настоящее время поддерживается Chrome для Android , Firefox для Android и Safari для iOS.

Однако в iOS Safari двойное касание - это жест прокрутки на не масштабируемых страницах. По этой причине они не могут убрать задержку в 300 мс . Если они не могут удалить задержку на не масштабируемых страницах, они вряд ли удалят ее на масштабируемых страницах.

Телефоны Windows также сохраняют задержку 300 мс на не масштабируемых страницах, но у них нет альтернативного жеста, такого как iOS, поэтому они могут удалить эту задержку, как это имеет Chrome.Вы можете удалить задержку на Windows Phone, используя:

html {
-ms-touch-action: manipulation;
touch-action: manipulation;
}

Источник: http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away

ОБНОВЛЕНИЕ 2015 Декабрь

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

ОБНОВЛЕНИЕ 2016 Март

В Safari для iOS время ожидания 350 мс для обнаружения второго касания было удалено, чтобы создать ответ «быстрое касание». Это включено для страниц, объявляющих область просмотра с шириной = ширина устройства или масштабируемой пользователем = no. Авторы также могут выбрать поведение быстрого касания для определенных элементов с помощью CSS, touch-action: manipulationкак описано здесь (прокрутите вниз до заголовка «Стилизация поведения при быстром касании») и здесь .

Этот плагин -FastClick, разработанный Financial Times, сделает это за вас!

Обязательно добавьте event.stopPropagation();и / или event.preventDefault();сразу после функции щелчка, иначе она может работать дважды, как для меня, то есть:

$("#buttonId").on('click',function(event){
    event.stopPropagation(); event.preventDefault();
   //do your magic

});

Я знаю, что это устарело, но не могли бы вы просто проверить, поддерживается ли сенсорный ввод в браузере? Затем создайте переменную "touchend" или "click" и используйте эту переменную в качестве события, связанного с вашим элементом?

var clickOrTouch = (('ontouchend' in window)) ? 'touchend' : 'click';
$('#element').on(clickOrTouch, function() {
    // do something
});

Итак, этот пример кода проверяет, поддерживается ли в браузере событие «touchhend», а если нет, то мы используем событие «click».

(Редактировать: изменено "touchend" на "ontouchend")

Я столкнулся с чрезвычайно популярной альтернативой под названием Hammer.js (страница Github), которая, на мой взгляд, является лучшим подходом.

Hammer.js - это более полнофункциональная сенсорная библиотека (имеет много команд смахивания), чем Fastclick.js (ответ, получивший наибольшее количество голосов).

Однако будьте осторожны : быстрая прокрутка на мобильных устройствах действительно приводит к блокировке пользовательского интерфейса при использовании Hammer.js или Fastclick.js. Это серьезная проблема, если на вашем сайте есть лента новостей или интерфейс, в котором пользователи будут много прокручивать (это похоже на большинство веб-приложений). По этой причине я на данный момент не использую ни один из этих плагинов.

Почему-то отключение масштабирования, кажется, отключает эту небольшую задержку. Имеет смысл, поскольку в этом случае двойное нажатие больше не требуется.

Как я могу «отключить» масштабирование мобильной веб-страницы?

Но имейте в виду, какое влияние это окажет на удобство использования. Это может быть полезно для веб-страниц, разработанных как приложения, но не должно использоваться для более общих «статических» страниц. ИМХО. Я использую его для домашнего проекта, которому нужна низкая задержка.

К сожалению, нет простого способа сделать это. Таким образом, простое использование touchstartили touchendоставит у вас другие проблемы, например, при нажатии на кнопку кто-то начинает прокрутку. Некоторое время мы пользуемся zepto , и даже с этим действительно хорошим фреймворком со временем возникли некоторые проблемы. Многие из них закрыты , но это не область простого решения.

У нас есть это решение для глобальной обработки кликов по ссылкам:

   $(document.body).
    on('tap', 'a',function (e) {
      var href = this.getAttribute('href');
      if (e.defaultPrevented || !href) { return; }
      e.preventDefault();
      location.href= href;
    }).
    on('click', 'a', function (e) {
      e.preventDefault();
    });

Я искал простой способ без jquery и без библиотеки fastclick. Это работает для меня:

var keyboard = document.getElementById("keyboard");
var buttons = keyboard.children;
var isTouch = ("ontouchstart" in window);
for (var i=0;i<buttons.length;i++) {
    if ( isTouch ) {
        buttons[i].addEventListener('touchstart', clickHandler, false);         
    } else {
        buttons[i].addEventListener('click', clickHandler, false);          
    }
}

Просто чтобы предоставить дополнительную информацию.

В iOS 10 <button>не удавалось запускать s на моей странице постоянно. Всегда было отставание.

Я попробовал fastclick / Hammer / tapjs / заменить щелчок на touchstart, все не удалось.

ОБНОВЛЕНИЕ: причина вроде в том, что кнопка слишком близко к краю! переместите его ближе к центру и отставание исчезнет!

Вы должны явно объявить пассивный режим :

window.addEventListener('touchstart', (e) => {

    alert('fast touch');

}, { passive : true});

В jQuery вы можете привязать событие «touchhend», запускающий код сразу после нажатия (это похоже на нажатие клавиши на клавиатуре). Проверено на текущих версиях планшетов Chrome и Firefox. Не забудьте также "щелкнуть" для ваших ноутбуков с сенсорным экраном и настольных устройств.

jQuery('.yourElements').bind('click touchend',function(event){

    event.stopPropagation();
    event.preventDefault();

	// everything else
});