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

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

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

$("#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(сервер) который я думаю, что это лучший подход.

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

будьте осторожны, хотя: прокрутка быстро на мобильных устройствах, как правило, действительно заблокировать пользовательский интерфейс, когда вы используете либо молоток.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", код триггера ведьмы inmediatly после нажатия (как keydown на клавиатуре). Протестировано на текущих версиях планшетов Chrome и Firefox. Не забудьте также "нажать" для ваших ноутбуков с сенсорным экраном и настольных устройств.

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

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

	// everything else
});