Clique no evento chamado duas vezes no touchend no iPad

Eu estou usando o jquery animate para o slide. Eu tenho uma seta no final do slide e recebo o evento click nessa seta. O trabalho dele é mover um item dentro do silde ao clicar e mover todo o silde no mousedown. Isso está funcionando bem na área de trabalho, mas no iPad dois itens estão entrando no slide de cada vez ao clicar. Não estou entendendo por que o evento click é chamado duas vezes no iPad. O código de amostra para o clique é:

$('#next_item').bind('mousedown touchstart MozTouchDown',function(e) { $('.slide').animate({left:left},6000); }); $('#next_item').bind('mouseup touchend MozTouchRelease',function(e) { No.nextItem(); }); 

#next_item é o id da seta no final do slide. Eu tentei unbind touchstart e touchend evento, mas durante a rolagem de slides devido a desvincular o item não vem dentro do slide após o item único. No.nextItem() move um item dentro do slide. left em $('.slide') é mover o slide para a esquerda. Por favor me ajude a encontrar a solução porque isso está acontecendo e como resolver esse problema para o ipad.

iPad ambos entendem touchstart / -end e mousestart / -end.

É triggersdo assim:

 ┌─────────────────────┬──────────────────────┬─────────────────────────┐ │Finger enters tablet │ Finger leaves tablet │ Small delay after leave │ ├─────────────────────┼──────────────────────┼─────────────────────────┤ │touchstart │ touchend │ mousedown │ │ │ │ mouseup │ └─────────────────────┴──────────────────────┴─────────────────────────┘ 

Você tem que detectar se o usuário está em um tablet e, em seguida, retransmitir o toque iniciar coisas …:

 /******************************************************************************** * * Dont sniff UA for device. Use feature checks instead: ('touchstart' in document) * The problem with this is that computers, with touch screen, will only trigger * the touch-event, when the screen is clicked. Not when the mouse is clicked. * ********************************************************************************/ var isIOS = ((/iphone|ipad/gi).test(navigator.appVersion)); var myDown = isIOS ? "touchstart" : "mousedown"; var myUp = isIOS ? "touchend" : "mouseup"; 

e então liga-lo assim:

 $('#next_item').bind(myDown, function(e) { 

Você também pode fazer um evento que cuida disso, veja:

http://benalman.com/news/2010/03/jquery-special-events/

Evento básico normalizado:

 $.event.special.myDown = { setup: function() { var isIOS = ((/iphone|ipad/gi).test(navigator.appVersion)); var myDown = isIOS ? "touchstart" : "mousedown"; $(this).bind(myDown + ".myDownEvent", function(event) { event.type = "myDown"; $.event.handle.call(this, event); }); }, teardown: function() { $(this).unbind(".myDownEvent"); } }; 

Depois que o jQuery 1.9.0 $.event.handle mudou o nome para $.event.dispatch , para suportar ambos os que você pode escrever use este fallback:

 // http://stackoverflow.com/questions/15653917/jquery-1-9-1-event-handle-apply-alternative // ($.event.dispatch||$.event.handle).call(this, event); $.event.special.myDown = { setup: function() { var isIOS = ((/iphone|ipad/gi).test(navigator.appVersion)); var myDown = isIOS ? "touchstart" : "mousedown"; $(this).bind(myDown + ".myDownEvent", function(event) { event.type = "myDown"; ($.event.dispatch||$.event.handle).call(this, event); }); }, teardown: function() { $(this).unbind(".myDownEvent"); } }; 

Tenha cuidado ao usar um sniffer UA para iPad / iPod. Você está dispensando todos os dispositivos Android com uma solução como essa! Uma solução melhor é detectar o suporte por toque, ele funcionará em todos os dispositivos móveis / tablets:

 var isTouchSupported = "ontouchend" in document;