Comment reconnaître des événements tactiles en utilisant jQuery en Safari pour iPad? Est-il possible?

si vous utilisez jQuery 1.7+ c'est encore plus simple que toutes ces autres réponses.

$('#whatever').on({ 'touchstart' : function(){ /* do something... */ } });

la méthode la plus simple consiste à utiliser une bibliothèque Multitouch JavaScript comme Hammer.js . Alors vous pouvez écrire le code comme:

canvas
    .hammer({prevent_default: true})
    .bind('doubletap', function(e) { // And double click
        // Zoom-in
    })
    .bind('dragstart', function(e) { // And mousedown
        // Get ready to drag
    })
    .bind('drag', function(e) { // And mousemove when mousedown
        // Pan the image
    })
    .bind('dragend', function(e) { // And mouseup
        // Finish the drag
    });

Et vous pouvez continuer. Il supporte le robinet, le double robinet, le glisser, le tenir, le transformer (i.e., pincer) et le glisser. Les événements touch se déclenchent aussi lorsque des actions équivalentes de la souris se produisent, donc vous n'avez pas besoin d'écrire deux ensembles de gestionnaires d'événements. Oh, et vous avez besoin du plugin jQuery si vous voulez pouvoir écrire dans le jQueryish façon comme je l'ai fait.

L'utilisation de touchstart ou de touchend seul n'est pas une bonne solution, car si vous faites défiler la page, l'appareil le détecte comme toucher ou tap aussi. Ainsi, la meilleure façon de détecter un événement tap and click en même temps est simplement de détecter les événements tactiles qui ne bougent pas l'écran(défilement). Pour ce faire il suffit d'ajouter ce code à votre demande:

$(document).on('touchstart', function() {
    detectTap = true; //detects all touch events
});
$(document).on('touchmove', function() {
    detectTap = false; //Excludes the scroll events from touch events
});
$(document).on('click touchend', function(event) {
    if (event.type == "click") detectTap = true; //detects click events 
       if (detectTap){
          //here you can write the function or codes you wanna execute on tap

       }
 });

Je l'ai testé et il fonctionne très bien pour moi sur iPad et iPhone. Il détecte le robinet et peut distinguer le robinet et le toucher faites défiler facilement.

vous pouvez utiliser .on () pour capturer plusieurs événements et ensuite tester pour l'écran tactile, par exemple:

$('#selector')
.on('touchstart mousedown', function(e){
  e.preventDefault();
  var touch = e.touches[0];
  if(touch){
    // Do some stuff
  }
  else {
    // Do some other stuff
  }
});

jQuery Core n'a rien de spécial, mais vous pouvez lire sur jQuery Mobile Events page sur différents événements tactiles, qui fonctionnent également sur d'autres appareils que iOS aussi bien.

ils sont:

• appuyez sur
• taphold
• glisser
• swipeleft
• swiperight

Evénements de défilement (basé sur le toucher sur les appareils mobiles) les appareils iOS bloquent la manipulation du DOM pendant le défilement.

j'étais un peu inquiet de n'utiliser que touchmove pour mon projet, car il ne semble tirer que lorsque votre toucher se déplace d'un endroit à un autre (et pas sur le toucher initial). Donc je l'ai combiné avec touchstart , et cela semble fonctionner très bien pour le toucher initial et tous les mouvements.

<script>

function doTouch(e) {
    e.preventDefault();
    var touch = e.touches[0];

    document.getElementById("xtext").innerHTML = touch.pageX;
    document.getElementById("ytext").innerHTML = touch.pageY;   
}

document.addEventListener('touchstart', function(e) {doTouch(e);}, false);
document.addEventListener('touchmove', function(e) {doTouch(e);}, false);

</script>

X: <div id="xtext">0</div>
Y: <div id="ytext">0</div>

je sais que je suis un peu en retard sur ce mais vient de tester benmajor's GitHub jQuery Touch Events plugin pour les versions 1.4 et 1.7+ de JQuery. Il est léger et fonctionne parfaitement avec les deux on et bind tout en fournissant un support pour un ensemble exhaustif d'événements tactiles.