3

Eu estou tentando algo diferente, gostaria de implementar algo semelhante a um recurso do Instagram: dois tapas para dar like.

Para tentar fazer isso, estou usando as últimas versões do jQuery e do Hammer.js. Não sou um programador avançado nesta área, entretanto eu cheguei até a seguinte lógica para identificar qual o evento que o usuário deseja executar:

var postDoubleTapped;
postDoubleTapped = false;

Hammer($('.post').get(0)).on('doubletap', function() {
  event.preventDefault();
  postDoubleTapped = true;

  console.log('Double tap!');
  return false;
});

$(document).on('click', '.post a', function(event) {
  event.preventDefault();
  console.log(postDoubleTapped);

  setTimeout((function(_this) {
    return function() {
      if (!postDoubleTapped) {
        location.href = $(_this).attr('href');
      }
      postDoubleTapped = false;
    };
  })(this), 500);
  return false;
});

Como vocês podem visualizar no exemplo (http://codepen.io/caio/pen/vqEjc), não funcionou! O console retorna:

Console

Existe outro problema, eu não consigo reproduzir o target="_blank" na tag a.

Este é o melhor método para fazer isso? Eu estou no caminho certo? Como eu posso arrumar isso?

0

1 Resposta 1

1

Seu problema é que o setTimeout é chamado duas vezes: uma no primeiro clique/tapa e outra no segundo. O que está sendo retornado no console é natural: 1) o primeiro é detectado, imprime false e cria um setTimeout; 2) o Hammer trata do doubletap, imprimindo Double tap!; 3) o segundo é detectado, imprime true e cria um novo setTimeout.

O primeiro setTimeout executa, atribuindo postDoubleTapped de novo pra false. Quando o segundo setTimeout executa, essa variável já tem valor false, de modo que ele faz o redirecionamento.

Para solucionar o problema, vamos por partes:

  1. Para uma solução rápida, salve o valor de retorno do setTimeout numa variável e - antes de criar outro - destrua-o usando clearTimeout:

    var ultimoTimeout = null;
    
    ...
    
    $(document).on('click', '.post a', function(event) {
        event.preventDefault();
        console.log(postDoubleTapped);
    
        if ( ultimoTimeout !== null )
            clearTimeout(ultimoTimeout);
        ultimoTimeout = setTimeout((function(_this) {
            ...
    
  2. Para uma solução "correta", o interessante seria impedir o evento tratado pelo Hammer de propagar. Primeiro, notei que você está usando o event global, em vez de pegar o parâmetro da função, mas não creio que isso tenha feito diferença na prática:

    Hammer($('.post').get(0)).on('doubletap', function() {
    
    // Não deveria ser:
    //Hammer($('.post').get(0)).on('doubletap', function(event) {
    

    Além disso, você chama o preventDefault, mas não o stopPropagation (esse sim deveria impedir o evento de propagar - chegando a ser tratado pelo jQuery). Digo "deveria" porque - por alguma razão que desconheço - usá-lo não parece ter feito diferença... Notei que o target do evento tratado pelo Hammer é a imagem, não o hiperlink, mas isso não deveria importar - já que a imagem está dentro do link. Não compreendo o que está havendo, de modo que um workaround seria usar a solução proposta no item 1.

  3. Por fim, não importa se seu link possui target="_blank" ou não, já que você está fazendo - via JavaScript - uma redireção da janela corrente pro novo endereço (mas isso você próprio já tinha percebido, né?). A solução é usar window.open em vez de mexer no location.href:

    if (!postDoubleTapped) {
        window.open($(_this).attr('href'), $(_this).attr('target') || "_self");
    }
    

    Isso vai fazer com que o browser tente abrir a URL na janela especificada pelo atributo target do seu link (no caso, _blank) ou - se esse atributo não existir - na própria janela (_self). No meu teste, o Chrome bloqueou o redirecionamento (como se fosse um popup) e - de acordo com essa pergunta no SOen - não há muito o que se possa fazer a respeito...

    Pelo que eu li, o problema está no setTimeout - se a abertura da janela fosse consequência direta do clique do usuário (i.e. ocorresse enquanto o próprio evento de clique estivesse sendo tratado) então creio que o browser abriria normalmente. Mas como ele ocorre num momento arbitrário (quando o setTimeout executa) o bloqueador de popup acha que o site tentou abrir uma janela por conta dele, e não deixa. Quanto a isso, receio que não tenho nada a sugerir por enquanto...

3
  • 1
    Informações adicionais: essa pergunta no SOen sugere usar window.stop no ondblclick para parar a troca de páginas, mas creio que ela só funcione (se é que funciona) na página atual. Essa outra propõe uma alternativa, entretanto como o comportamento é semelhante a de um "pop under" (i.e. mais usado "pro mal" que "pro bem") muitos browsers não a permitem (no Chrome, por exemplo, não funcionou). Finalmente, aqui está um argumento desencorajando esse uso.
    – mgibsonbr
    29/04/2014 às 13:18
  • Muitíssimo obrigado pela ajuda, estou considerando todas as suas observações e tentando reconstruir meu código (deixar de utilizar o Hammer.js pode até vir a ser uma opção). No item 2 você disse sobre o target do Hammer. Isso não acontece pois são seletores diferentes nos eventos? 29/04/2014 às 14:33
  • @CaioTarifa Eu não entendo o suficiente de eventos no DOM pra saber por que isso acontece (pois o $('.post').get(0) no seletor do Hammer também se refere ao hiperlink), mas sei que isso não deveria importar: eventos no img propagam pro a, que propagam pro .post até chegar no document (onde ele é tratado pelo on do jQuery). Isso tudo ocorre "por baixo dos panos" - independente da framework/biblioteca - por isso estranhei bastante quando o stopPropagation não funcionou...
    – mgibsonbr
    29/04/2014 às 14:52

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .