Click evento chiamato due volte su touchend in iPad

Question

Sto usando jquery animate per la diapositiva. Ho una freccia alla fine della diapositiva e ho dato l'evento click su quella freccia. Il suo funzionamento consiste nel muovere un elemento all'interno della silda al clic e spostare l'intera silde sul mouse. Funziona bene su desktop ma nell'iPad due elementi stanno entrando nella diapositiva in un momento al clic. Non capisco perché l'evento click venga chiamato due volte in iPad. Il codice di esempio per lo scatto è:

$('#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 è l'id della freccia alla fine della diapositiva. Ho provato a unbindtouchstart e touchend evento, ma durante lo scorrimento della diapositiva a causa di non vincolare l'oggetto non entra nella diapositiva dopo singolo elemento. No.nextItem() sposta un elemento all'interno della diapositiva. left in $('.slide') è quello di spostare la diapositiva a sinistra. Per favore aiutami a trovare la soluzione perché questo sta accadendo e come risolvere questo problema per ipad.

Answer 1

iPad comprende sia touchstart/-end che mousestart/-end.

Is viene licenziato in questo modo:

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

Bisogna rilevare se l'utente si trova su un tablet e di trasmetterlo sul touch iniziare le cose ...:

/******************************************************************************** 
* 
* 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 quindi associare in questo modo:

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

si può anche fare un evento che si prende cura di esso, vedere:

0.123.

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

base normalizzata giù evento:

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

Dopo jQuery 1.9.0 $.event.handle nome cambiò in $.event.dispatch, per supportare sia è possibile scrivere usano questo ripiego:

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

Answer 2

Attenzione con l'utilizzo di uno sniffer UA per iPad/iPod. Stai abbandonando tutti i dispositivi Android con una soluzione del genere! Una soluzione migliore è rilevare il supporto touch, funzionerà su tutti i dispositivi Mobile/Tablet:

var isTouchSupported = "ontouchend" in document;