Виключіть затримку 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 мс для виявлення другого натискання видалено, щоб створити відповідь швидкого натискання. Це включено для сторінок, які оголошують область перегляду з шириною = ширина пристрою або масштабованою користувачем = ні. Автори також можуть вибрати поведінку швидкого натискання на певні елементи, використовуючи CSS, touch-action: manipulationяк описано тут (прокрутіть вниз до заголовка "Стиль поведінки швидкого натискання") і тут .

Цей плагін -FastClick, розроблений Financial Times , ідеально підходить для вас!

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

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

});

я знаю, що це старе, але чи не можете ви просто перевірити, чи підтримується у браузері "дотик"? Потім створіть змінну, яка є або “touchend”, або “клацніть” і використовувати цю змінну як подію, яка прив’язується до вашого елемента?

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

Таким чином, зразок коду перевіряє, чи підтримується у браузері подія "touchend", а якщо ні, то ми використовуємо подію "click".

(Редагувати: змінено "touchend" на "ontouchend")

Я натрапив на надзвичайно популярну альтернативу Hammer.js (сторінка Github), яка, на мою думку, є найкращим підходом.

Hammer.js - це більш повнофункціональна бібліотека дотиків (має безліч команд для проведення пальцем), ніж Fastclick.js (відповідь, яка найбільше оцінюється)

Однак будьте обережні : швидка прокрутка на мобільних пристроях, як правило, дійсно блокує інтерфейс, коли ви використовуєте Hammer.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 / замінити click на touchstart, все не вдалося.

ОНОВЛЕННЯ: здається, причина полягає в тому, що кнопка знаходиться занадто близько до краю! перенесіть його поблизу центру і відставайте!

Ви повинні явно оголосити пасивний режим :

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

    alert('fast touch');

}, { passive : true});

У jQuery ви можете прив'язати подію "touchend", код запуску відьми одразу після натискання (як клавіатура). Перевірено на поточних версіях планшетів Chrome і Firefox. Не забувайте також натискати на ноутбуки та настільні пристрої з сенсорним екраном.

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

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

	// everything else
});