Réponse lente à l'événement click sur iPad

iOS délibérément des retards sur des événements afin que les gestes/balayage fonctionne correctement. Par exemple, lorsque vous appuyez sur un élément que vous vouliez dire pour faire défiler toute la page, déclenche pas l'événement de clic sur un élément. Pour obtenir un contrôle plus précis, utilisez les événements tactiles.

Voir: https://developer.mozilla.org/en-US/docs/DOM/Touch_events

Exemple à l'aide de touchstart: http://jsfiddle.net/R4pey/7/.

Note que la capture des événements tactiles a des conséquences, par exemple, vous pouvez remplacer un comportement que l'utilisateur s'attend (comme glisser).

Notez également que vous devez généralement lier vos événements indépendamment de votre balise (pas inline) afin d'obtenir un nettoyeur de séparation de balisage et de script.

Voici un exemple à l'aide de jQuery qui lie les événements distincts de la balise, et gère à la fois click et touchstart événements. Testé dans Chrome 21, 15 FF, IE9, et sur l'iPad 3.

var url1 = "http://watkinsfilm.com/wp-content/uploads/2012/09/19mm.jpg";
var url2 = "http://watkinsfilm.com/wp-content/uploads/2012/09/200mm.jpg";

//preload from original code
var img1 = new Image();
img1.src = url1;

var img2 = new Image();
img2.src = url2;

//bind the click and touchstart events
$("#img").on("click touchstart", function(e){
    if (this.src == url1) {
        this.src = url2;
    }
    else if (this.src == url2) {
        this.src = url1;
    } 

    //When touch event fires, this is needed to prevent the click
    //event from firing as well as @RyanWheale noted in the comments.
    e.preventDefault(); 
});

Mettre en œuvre touchend Gestionnaires d'Événements

Contrairement à cliquez sur et évènements touchstarttouchend les événements sont déclenchés instantanément, sans 300ms retard. Cela peut être pratique si vous êtes en développement une touche uniquement WebGL ou de la toile de base de jeu, cependant, vous ne pouvez pas compter uniquement sur touchend dans les pages web standard.

$('#id').on('touchstart',function(e) {                

    //code here...

});