Estou trabalhando em um site móvel que precisa funcionar em uma variedade de dispositivos. Os que estão me dando dor de cabeça no momento são BlackBerry.

Precisamos oferecer suporte a cliques no teclado e a eventos de toque.

Idealmente, eu apenas usaria:

$thing.click(function(){...})

mas o problema que estamos enfrentando é que alguns desses dispositivos blackberry têm um atraso muito irritante desde o momento do toque até o acionamento de um clique.

O remédio é usar o touchstart:

$thing.bind('touchstart', function(event){...})

Mas como faço para vincular os dois eventos, mas apenas disparar um? Ainda preciso do evento de clique para dispositivos de teclado, mas é claro que não quero que o evento de clique seja acionado se estiver usando um dispositivo de toque.

Uma pergunta bônus: existe alguma maneira de fazer isso e acomodar adicionalmente navegadores que nem sequer têm um evento de toque inicial? Ao pesquisar isso, parece que o BlackBerry OS5 não oferece suporte ao touchstart e também precisará contar com os eventos de clique desse navegador.

TERMO ADITIVO:

Talvez uma pergunta mais abrangente seja:

Com o jQuery, é possível / recomendado lidar com as interações de toque e de mouse com as mesmas ligações?

Idealmente, a resposta é sim. Caso contrário, tenho algumas opções:

1) Usamos o WURFL para obter informações sobre o dispositivo, para criar nossa própria matriz de dispositivos. Dependendo do dispositivo, usaremos o touchstart OU clique.

2) Detectar para suporte por toque no navegador via JS (preciso fazer mais pesquisas sobre isso, mas parece que isso é possível).

No entanto, isso ainda deixa um problema: e os dispositivos que suportam AMBOS. Alguns dos telefones suportados (nomeadamente o Nokias e BlackBerries) têm ecrãs tácteis e teclados. Então isso me leva de volta à pergunta original ... existe uma maneira de permitir as duas coisas de uma vez?

Atualização : Confira o projeto PolyFill de eventos do ponteiro do jQuery , que permite vincular a eventos de "ponteiro" em vez de escolher entre mouse e toque.

Associe-se a ambos, mas faça um sinalizador para que a função seja acionada apenas uma vez a cada 100ms.

var flag = false;
$thing.bind('touchstart click', function(){
  if (!flag) {
    flag = true;
    setTimeout(function(){ flag = false; }, 100);
    // do something
  }

  return false
});

Essa é a correção que eu "crio" e remove o GhostClick e implementa o FastClick. Experimente por conta própria e deixe-nos saber se funcionou para você.

$(document).on('touchstart click', '.myBtn', function(event){
        if(event.handled === false) return
        event.stopPropagation();
        event.preventDefault();
        event.handled = true;

        // Do your magic here

});

Você pode tentar algo como isto:

var clickEventType=((document.ontouchstart!==null)?'click':'touchstart');
$("#mylink").bind(clickEventType, myClickHandler);

Geralmente isso também funciona:

$('#buttonId').on('touchstart click', function(e){
    e.stopPropagation(); e.preventDefault();
    //your code here

});

Apenas adicionar return false;no final da on("click touchstart")função de evento pode resolver esse problema.

$(this).on("click touchstart", function() {
  // Do things
  return false;
});

Na documentação do jQuery em .on ()

Retornar falsede um manipulador de eventos chama automaticamente event.stopPropagation()e event.preventDefault(). Um falsevalor também pode ser passado para o manipulador como uma abreviação de function(){ return false; }.

Eu tive que fazer algo semelhante. Aqui está uma versão simplificada do que funcionou para mim. Se um evento de toque for detectado, remova a ligação de clique.

$thing.on('touchstart click', function(event){
  if (event.type == "touchstart")
    $(this).off('click');

  //your code here
});

No meu caso, o evento click foi vinculado a um <a>elemento, então tive que remover a ligação de clique e religar um evento de clique que impedia a ação padrão do <a>elemento.

$thing.on('touchstart click', function(event){
  if (event.type == "touchstart")
    $(this).off('click').on('click', function(e){ e.preventDefault(); });

  //your code here
});

Eu consegui da seguinte maneira.

Mole-mole...

$(this).on('touchstart click', function(e){
  e.preventDefault();
  //do your stuff here
});

Acredito que a melhor prática agora é usar:

$('#object').on('touchend mouseup', function () { });

toque

O evento de toque final é acionado quando um ponto de toque é removido da superfície de toque.

O evento touchend não acionará nenhum evento do mouse.

---

mouseup

O evento mouseup é enviado para um elemento quando o ponteiro do mouse está sobre o elemento e o botão do mouse é liberado. Qualquer elemento HTML pode receber este evento.

O evento de mouseup não acionará nenhum evento de toque.

EXEMPLO

$('#click').on('mouseup', function () { alert('Event detected'); });
$('#touch').on('touchend', function () { alert('Event detected'); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="click">Click me</h1>
<h1 id="touch">Touch me</h1>

EDIT (2017)

A partir de 2017, navegadores começando com o Chrome e dando passos para tornar o evento de clique .on("click")mais compatível para mouse e toque, eliminando o atraso gerado por eventos de toque nas solicitações de clique.

Isso leva à conclusão de que voltar a usar apenas o evento click seria a solução mais simples para o futuro.

Ainda não fiz nenhum teste entre navegadores para ver se isso é prático.

Geralmente, você não deseja misturar a API de toque padrão e sem toque (clique). Depois de entrar no mundo do toque, é mais fácil lidar apenas com as funções relacionadas ao toque. Abaixo está um pseudo-código que faria o que você deseja.

Se você se conectar no evento touchmove e rastrear os locais, poderá adicionar mais itens na função doTouchLogic para detectar gestos e outros enfeites.

var touchStartTime;
var touchStartLocation;
var touchEndTime;
var touchEndLocation;

$thing.bind('touchstart'), function() {
     var d = new Date();
     touchStartTime = d.getTime();
     touchStartLocation = mouse.location(x,y);
});

$thing.bind('touchend'), function() {
     var d = new Date();
     touchEndTime= d.getTime();
     touchEndLocation= mouse.location(x,y);
     doTouchLogic();
});

function doTouchLogic() {
     var distance = touchEndLocation - touchStartLocation;
     var duration = touchEndTime - touchStartTime;

     if (duration <= 100ms && distance <= 10px) {
          // Person tapped their finger (do click/tap stuff here)
     }
     if (duration > 100ms && distance <= 10px) {
          // Person pressed their finger (not a quick tap)
     }
     if (duration <= 100ms && distance > 10px) {
          // Person flicked their finger
     }
     if (duration > 100ms && distance > 10px) {
          // Person dragged their finger
     }
}

verifique botões rápidos e cliques de cliques no google https://developers.google.com/mobile/articles/fast_buttons

Bem ... Tudo isso é super complicado.

Se você tem modernizr, é um acéfalo.

ev = Modernizr.touch ? 'touchstart' : 'click';

$('#menu').on(ev, '[href="#open-menu"]', function(){
  //winning
});

Outra implementação para melhor manutenção. No entanto, essa técnica também fará event.stopPropagation (). O clique não é capturado em nenhum outro elemento que clicou por 100 ms.

var clickObject = {
    flag: false,
    isAlreadyClicked: function () {
        var wasClicked = clickObject.flag;
        clickObject.flag = true;
        setTimeout(function () { clickObject.flag = false; }, 100);
        return wasClicked;
    }
};

$("#myButton").bind("click touchstart", function (event) {
   if (!clickObject.isAlreadyClicked()) {
      ...
   }
}

Apenas para fins de documentação, eis o que eu fiz para a solução de clique / resposta mais rápida / mais rápida na área de trabalho / toque no celular que eu conseguia pensar:

Substituí a onfunção do jQuery por uma modificada que, sempre que o navegador suporta eventos de toque, substitui todos os meus eventos de clique por touchstart.

$.fn.extend({ _on: (function(){ return $.fn.on; })() });
$.fn.extend({
    on: (function(){
        var isTouchSupported = 'ontouchstart' in window || window.DocumentTouch && document instanceof DocumentTouch;
        return function( types, selector, data, fn, one ) {
            if (typeof types == 'string' && isTouchSupported && !(types.match(/touch/gi))) types = types.replace(/click/gi, 'touchstart');
            return this._on( types, selector, data, fn);
        };
    }()),
});

O uso seria exatamente o mesmo de antes, como:

$('#my-button').on('click', function(){ /* ... */ });

Mas usaria o touchstart quando disponível, clique quando não estiver. Não são necessários atrasos de qualquer tipo: D

Eu apenas tive a idéia de memorizar se ontouchstartalguma vez foi acionado. Nesse caso, estamos em um dispositivo que suporta e deseja ignorar o onclickevento. Desde ontouchstartsempre deve ser acionado antes onclick , eu estou usando isso:

<script> touchAvailable = false; </script>
<button ontouchstart="touchAvailable=true; myFunction();" onclick="if(!touchAvailable) myFunction();">Button</button>

Você pode tentar assim:

var clickEvent = (('ontouchstart' in document.documentElement)?'touchstart':'click');
$("#mylink").on(clickEvent, myClickHandler);

No meu caso, isso funcionou perfeitamente:

jQuery(document).on('mouseup keydown touchend', function (event) {
var eventType = event.type;
if (eventType == 'touchend') {
    jQuery(this).off('mouseup');
}
});

O principal problema foi quando, em vez disso, tentei com o clique, nos dispositivos de toque, acionar o clique e tocar ao mesmo tempo; se eu usar o clique, algumas funcionalidades não funcionavam em dispositivos móveis. O problema com o clique é que é um evento global que dispara o restante do evento, incluindo touchend.

Isso funcionou para mim, o celular ouve os dois, por isso evite o que é o evento de toque. a área de trabalho ouve apenas o mouse.

 $btnUp.bind('touchstart mousedown',function(e){
     e.preventDefault();

     if (e.type === 'touchstart') {
         return;
     }

     var val = _step( _options.arrowStep );
               _evt('Button', [val, true]);
  });

Sendo para mim a melhor resposta dada por Mottie, estou apenas tentando tornar seu código mais reutilizável, então esta é a minha contribuição:

bindBtn ("#loginbutton",loginAction);

function bindBtn(element,action){

var flag = false;
$(element).bind('touchstart click', function(e) {
    e.preventDefault();
    if (!flag) {
        flag = true;
        setTimeout(function() {
            flag = false;
        }, 100);
        // do something
        action();
    }
    return false;
});

Também estou trabalhando em um aplicativo da web Android / iPad, e parece que apenas o uso de "touchmove" é suficiente para "mover componentes" (não é necessário iniciar o touch). Ao desativar o touchstart, você pode usar .click (); do jQuery. Na verdade, está funcionando porque não foi sobrecarregado pelo touchstart.

Por fim, você pode binb .live ("touchstart", function (e) {e.stopPropagation ();}); para solicitar que o evento touchstart pare de se propagar, clique na sala () para ser acionado.

Funcionou para mim.

Há muitas coisas a considerar ao tentar resolver esse problema. A maioria das soluções interrompe a rolagem ou não trata os eventos de clique fantasma corretamente.

Para uma solução completa, consulte https://developers.google.com/mobile/articles/fast_buttons

NB: Você não pode manipular eventos de clique fantasma por elemento. Um clique atrasado é acionado pelo local da tela. Portanto, se seus eventos de toque modificarem a página de alguma forma, o evento de clique será enviado para a nova versão da página.

Pode ser eficaz atribuir aos eventos 'touchstart mousedown'ou 'touchend mouseup'evitar efeitos colaterais indesejados do uso click.

Aproveitando o fato de que um clique sempre segue um evento de toque, eis o que eu fiz para me livrar do "clique fantasma" sem precisar usar tempos limite ou sinalizadores globais.

$('#buttonId').on('touchstart click', function(event){
    if ($(this).data("already")) {
        $(this).data("already", false);
        return false;
    } else if (event.type == "touchstart") {
        $(this).data("already", true);
    }
    //your code here
});

Basicamente, sempre que um ontouchstartevento é acionado no elemento, um sinalizador é definido e, em seguida, removido (e ignorado) quando o clique chega.

Por que não usar a API de eventos jQuery?

http://learn.jquery.com/events/event-extensions/

Eu usei esse evento simples com sucesso. É limpo, com espaço para nome e flexível o suficiente para melhorar.

var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
var eventType = isMobile ? "touchstart" : "click";

jQuery.event.special.touchclick = {
  bindType: eventType,
  delegateType: eventType
};

Se você estiver usando jQuery, o seguinte funcionou muito bem para mim:

var callback; // Initialize this to the function which needs to be called

$(target).on("click touchstart", selector, (function (func){
    var timer = 0;
    return function(e){
        if ($.now() - timer < 500) return false;
        timer = $.now();
        func(e);
    }
})(callback));

Outras soluções também são boas, mas eu estava vinculando vários eventos em um loop e precisava da função de auto-chamada para criar um fechamento apropriado. Além disso, eu não queria desativar a ligação, pois queria que ela pudesse ser invocada no próximo clique / toque inicial.

Pode ajudar alguém em situação semelhante!

Para recursos simples, basta reconhecer o toque ou clique em Eu uso o seguinte código:

var element = $("#element");

element.click(function(e)
{
  if(e.target.ontouchstart !== undefined)
  {
    console.log( "touch" );
    return;
  }
  console.log( "no touch" );
});

Isso retornará "touch" se o evento touchstart estiver definido e "no touch", se não estiver. Como eu disse, essa é uma abordagem simples para eventos de clique / toque exatamente isso.

Estou tentando isso e até agora ele funciona (mas eu estou apenas no Android / Phonegap, então ressalte o emptor)

  function filterEvent( ob, ev ) {
      if (ev.type == "touchstart") {
          ob.off('click').on('click', function(e){ e.preventDefault(); });
      }
  }
  $('#keypad').on('touchstart click', '.number, .dot', function(event) {
      filterEvent( $('#keypad'), event );
      console.log( event.type );  // debugging only
           ... finish handling touch events...
  }

Não gosto do fato de estar vinculando manipuladores a cada toque, mas todas as coisas consideradas como toques não acontecem com muita frequência (no tempo do computador!)

Eu tenho um monte de manipuladores como o do '#keypad', por isso, ter uma função simples que me permite lidar com o problema sem muito código é o motivo pelo qual eu segui esse caminho.

Tente usar a Virtual Mouse (vmouse) Bindingspartir de jQuery Mobile. É um evento virtual especialmente para o seu caso:

$thing.on('vclick', function(event){ ... });

http://api.jquerymobile.com/vclick/

Lista de suporte do navegador: http://jquerymobile.com/browser-support/1.4/

EDIT: Minha resposta anterior (com base nas respostas deste tópico) não era o caminho a percorrer para mim. Eu queria um submenu para expandir a entrada do mouse ou tocar no clique e recolher na licença do mouse ou outro clique no toque. Como os eventos do mouse normalmente são acionados após os eventos de toque, era meio difícil escrever ouvintes de eventos que suportam a tela de toque e a entrada do mouse ao mesmo tempo.

plugin jQuery: toque ou mouse

Acabei escrevendo um plugin jQuery chamado " Touch Or Mouse " (897 bytes compactado) que pode detectar se um evento foi invocado por uma tela sensível ao toque ou mouse (sem testar o suporte ao toque!). Isso permite o suporte da tela sensível ao toque e do mouse ao mesmo tempo e separa completamente seus eventos.

Dessa forma, o OP pode usar touchstartou touchendresponder rapidamente a cliques de toque e clickcliques invocados apenas por um mouse.

Demonstração

Primeiro é preciso fazer ie. o elemento do corpo rastreia eventos de toque:

$(document.body).touchOrMouse('init');

Os eventos do mouse são vinculados aos elementos da maneira padrão e, ao ligar $body.touchOrMouse('get', e), podemos descobrir se o evento foi chamado por uma tela sensível ao toque ou mouse.

$('.link').click(function(e) {
  var touchOrMouse = $(document.body).touchOrMouse('get', e);

  if (touchOrMouse === 'touch') {
    // Handle touch click.
  }
  else if (touchOrMouse === 'mouse') {
    // Handle mouse click.
  }
}

Veja o plug-in no trabalho em http://jsfiddle.net/lmeurs/uo4069nh .

Explicação

1. Este plugin precisa ser chamado, ie. o elemento body para rastrear touchstarte touchendeventos, dessa forma o touchendevento não precisa ser disparado no elemento trigger (ou seja, um link ou botão). Entre esses dois eventos de toque, este plug-in considera qualquer evento de mouse invocado pelo toque.
2. Os eventos do mouse são disparados somente depois touchend, quando um evento do mouse é disparado dentro de ghostEventDelay(opção, 1000ms por padrão) depois touchend, este plug-in considera que o evento do mouse é chamado pelo toque.
3. Ao clicar em um elemento usando uma tela sensível ao toque, o elemento ganha o :activeestado. O mouseleaveevento é acionado somente depois que o elemento perde esse estado por ie. clicando em outro elemento. Como isso pode levar alguns segundos (ou minutos!) Após o mouseenterevento ter sido disparado, esse plug-in acompanha o último mouseenterevento de um elemento : se o último mouseenterevento foi chamado pelo toque, o mouseleaveevento a seguir também é considerado chamado pelo toque.

Aqui está uma maneira simples de fazer isso:

// A very simple fast click implementation
$thing.on('click touchstart', function(e) {
  if (!$(document).data('trigger')) $(document).data('trigger', e.type);
  if (e.type===$(document).data('trigger')) {
    // Do your stuff here
  }
});

Você basicamente salva o primeiro tipo de evento que é acionado na propriedade 'trigger' no objeto de dados do jQuery que está anexado ao documento raiz e só é executado quando o tipo de evento é igual ao valor em 'trigger'. Em dispositivos sensíveis ao toque, a cadeia de eventos provavelmente seria 'touchstart' seguida de 'clique'; no entanto, o manipulador 'click' não será executado porque "click" não corresponde ao tipo de evento inicial salvo em 'trigger' ("touchstart").

A suposição, e eu acredito que seja segura, é que o seu smartphone não mudará espontaneamente de um dispositivo de toque para um dispositivo de mouse ou a torneira nunca será registrada porque o tipo de evento 'trigger' é salvo apenas uma vez por o carregamento da página e o "clique" nunca corresponderiam a "toque inicial".

Aqui está um código de código com o qual você pode brincar (tente tocar no botão em um dispositivo de toque - não deve haver atraso no clique): http://codepen.io/thdoan/pen/xVVrOZ

Também implementei isso como um plugin jQuery simples que também suporta a filtragem de descendentes do jQuery passando uma string de seletor:

// A very simple fast click plugin
// Syntax: .fastClick([selector,] handler)
$.fn.fastClick = function(arg1, arg2) {
  var selector, handler;
  switch (typeof arg1) {
    case 'function':
      selector = null;
      handler = arg1;
      break;
    case 'string':
      selector = arg1;
      if (typeof arg2==='function') handler = arg2;
      else return;
      break;
    default:
      return;
  }
  this.on('click touchstart', selector, function(e) {
    if (!$(document).data('trigger')) $(document).data('trigger', e.type);
    if (e.type===$(document).data('trigger')) handler.apply(this, arguments);
  });
};

Codepen: http://codepen.io/thdoan/pen/GZrBdo/

O melhor método que encontrei é gravar o evento de toque e fazer com que o evento chame o evento de clique normal programaticamente. Dessa forma, você terá todos os seus eventos de clique normais e precisará adicionar apenas um manipulador de eventos para todos os eventos de toque. Para cada nó que você deseja tornar tocável, basta adicionar a classe "touchable" a ele para chamar o manipulador de toque. Com o Jquery, funciona dessa maneira com alguma lógica para garantir que seja um evento de toque real e não um falso positivo.

$("body").on("touchstart", ".touchable", function() { //make touchable  items fire like a click event
var d1 = new Date();
var n1 = d1.getTime();
setTimeout(function() {
    $(".touchable").on("touchend", function(event) {
        var d2 = new Date();
        var n2 = d2.getTime();
        if (n2 - n1 <= 300) {
            $(event.target).trigger("click"); //dont do the action here just call real click handler
        }
    });
}, 50)}).on("click", "#myelement", function() {
//all the behavior i originally wanted
});