Устранить 300ms задержки на События нажмите в мобильном Safari

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

решение чтобы устранить эту задержку 300 мс, нужно использовать обработку jQuery Mobile "tap". К сожалению, я не знаком с этой структурой и не хочу загружать некоторые большой фреймворк, если все, что мне нужно, это строка или две кода, применяющего 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
});

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

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

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

10 ответов


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

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

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

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

Телефоны 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 имели задержку 350ms, прежде чем отдельные нажатия активируют ссылки или кнопки, чтобы позволить людям увеличивать масштаб страниц двойным нажатием. Chrome изменил это пару месяцев назад уже с помощью более умного алгоритма, чтобы обнаружить, что и теперь WebKit будет следовать с аналогичным подходом. Статья дает некоторые отличное понимание того, как браузеры работают с жестами касания и как браузеры все еще могут стать намного умнее, чем сегодня.

обновление 2016 марта

в Safari для iOS время ожидания 350 мс для обнаружения второго нажатия было удалено, чтобы создать ответ "быстрого нажатия". Это включено для страниц, объявляющих видовое окно с width=device-width или user-scalable=no. Авторы также могут выбрать поведение быстрого нажатия на определенные элементы с помощью CSS свойство touch-action, использующее значение манипуляции. См.http://www.w3.org/TR/pointerevents/#the-touch-action-css-property.


этот плагин-FastClick разработан Financial Times это прекрасно для вас!

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

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

});

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

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

таким образом, образец кода проверяет, поддерживается ли событие "touchend" в браузере, а если нет, мы используем событие "click".

(Edit: изменен "touchend" на "ontouchend")


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

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

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


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

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

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


к сожалению, нет простого способа сделать это. Так что просто используя 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, все не удалось.

UPDATE: причина, кажется, в том, что кнопка слишком близко к краю! переместить его ближе к центру и лагов нет!


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

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

    alert('fast touch');

}, { passive : true});

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

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

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

	// everything else
});