Elimine 300 ms de atraso em eventos de clique no Safari para celular

Eu li que o Safari para celular tem um atraso de 300 ms em eventos de clique desde o momento em que o link / botão é clicado até o momento em que o evento é disparado. O motivo do atraso é esperar para ver se o usuário pretende clicar duas vezes, mas de uma perspectiva de UX, esperar 300 ms geralmente é indesejável.

Uma solução para eliminar esse atraso de 300 ms é usar o manuseio de "tap" do jQuery Mobile. Infelizmente, não estou familiarizado com esta estrutura e não quero carregar uma estrutura grande se tudo que eu preciso é uma linha ou duas de código aplicado touchendda maneira certa.

Como muitos sites, meu site tem muitos eventos de clique como este:

$("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
});

e o que eu gostaria de fazer é me livrar do atraso de 300 ms em TODOS os eventos de clique usando um único snippet de código como este:

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

Isso é uma ideia boa / ruim?

Agora, alguns navegadores móveis eliminam 300 ms de atraso de clique se você definir a janela de visualização. Você não precisa mais usar soluções alternativas.

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

Atualmente é compatível com Chrome para Android , Firefox para Android e Safari para iOS

No entanto, no iOS Safari , o toque duplo é um gesto de rolagem em páginas que não podem ser alteradas. Por esse motivo, eles não podem remover o atraso de 300ms . Se eles não puderem remover o atraso nas páginas que podem ser ampliadas, é improvável que o removam nas páginas que podem ser ampliadas.

Telefones Windows também retêm o atraso de 300 ms em páginas não zeráveis, mas eles não têm um gesto alternativo como o iOS, então é possível para eles removerem esse atraso como o Chrome fez.Você pode remover o atraso no Windows Phone usando:

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

Fonte: http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away

ATUALIZAÇÃO dezembro de 2015

Até agora, o WebKit e o Safari no iOS tinham um atraso de 350 ms antes que toques simples ativassem links ou botões para permitir que as pessoas ampliassem as páginas com um toque duplo. O Chrome mudou isso há alguns meses, usando um algoritmo mais inteligente para detectar isso e o WebKit seguirá com uma abordagem semelhante . O artigo oferece alguns insights excelentes sobre como os navegadores funcionam com gestos de toque e como os navegadores ainda podem ficar muito mais inteligentes do que são hoje.

ATUALIZAÇÃO março de 2016

No Safari para iOS, o tempo de espera de 350 ms para detectar um segundo toque foi removido para criar uma resposta de “toque rápido”. Isso é habilitado para páginas que declaram uma janela de visualização com width = device-width ou user-scalable = no. Os autores também podem optar pelo comportamento do toque rápido em elementos específicos usando o CSS touch-action: manipulationconforme documentado aqui (role para baixo até o título 'Comportamento do toque rápido do estilo') e aqui .

Este plugin -FastClick desenvolvido pelo Financial Times faz isso perfeitamente para você!

Certifique-se de adicionar event.stopPropagation();e / ou event.preventDefault();diretamente após a função de clique, caso contrário, ela pode ser executada duas vezes da mesma forma que para mim, ou seja:

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

});

Eu sei que isso é antigo, mas você não pode simplesmente testar para ver se "touch" é compatível com o navegador? Em seguida, crie uma variável que seja "touchend" ou "click" e use essa variável como o evento que é vinculado ao seu elemento.

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

Portanto, esse exemplo de código verifica se o evento "touchend" é compatível com o navegador e, caso contrário, usamos o evento "click".

(Editar: mudou "touchend" para "ontouchend")

Encontrei uma alternativa extremamente popular chamada Hammer.js (página do Github) que acho que é a melhor abordagem.

Hammer.js é uma biblioteca de toque com mais recursos (tem muitos comandos de deslizamento) do que Fastclick.js (resposta mais votada).

Porém, tenha cuidado: a rolagem rápida em dispositivos móveis tende a realmente travar a IU quando você usa o Hammer.js ou Fastclick.js. Esse é um grande problema se o seu site tiver um feed de notícias ou uma interface em que os usuários rolarão muito (pareceria a maioria dos aplicativos da web). Por esse motivo, não estou usando nenhum desses plug-ins no momento.

De alguma forma, desativar o zoom parece desativar esse pequeno atraso. Faz sentido, já que o toque duplo não é mais necessário.

Como posso "desativar" o zoom em uma página da web para celular?

Mas esteja ciente do impacto na usabilidade que isso terá. Pode ser útil para páginas da web projetadas como aplicativos, mas não deve ser usado para páginas 'estáticas' de uso mais geral IMHO. Eu o uso para um projeto de estimação que precisa de baixa latência.

Infelizmente, não existe uma maneira fácil de fazer isso. Portanto, apenas usar touchstartou touchenddeixará você com outros problemas, como alguém que começa a rolar ao clicar em um botão, por exemplo. Usamos o zepto por um tempo e, mesmo com esse framework muito bom, alguns problemas surgiram com o tempo. Muitos deles estão fechados , mas parece que não é um campo de solução simples.

Temos esta solução para lidar globalmente com cliques em links:

   $(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();
    });

Procurei uma maneira fácil sem jquery e sem biblioteca fastclick. Isso funciona para mim:

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);          
    }
}

Apenas para fornecer algumas informações extras.

No iOS 10, os <button>s na minha página não podiam ser acionados continuamente. Sempre havia um atraso.

Tentei fastclick / Hammer / tapjs / substituindo click por touchstart, todos falharam.

ATUALIZAÇÃO: a razão parece ser que o botão está muito próximo da borda! mova-o para perto do centro e o atraso se foi!

Você deve declarar explicitamente o modo passivo :

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

    alert('fast touch');

}, { passive : true});

No jQuery você pode vincular o evento "touchend", que dispara o código imediatamente após o toque (é como uma tecla no teclado). Testado nas versões atuais dos tablets Chrome e Firefox. Não se esqueça do "clique" também para seus laptops com tela de toque e dispositivos de desktop.

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

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

	// everything else
});