Comment puis-je reconnaître les événements tactiles à l'aide de jQuery dans Safari pour iPad? C'est possible?

Est-il possible de reconnaître les événements tactiles sur le navigateur Safari de l'iPad à l'aide de jQuery?

J'ai utilisé les événements mouseOver et mouseOut dans une application Web. Existe-t-il des événements similaires pour le navigateur Safari de l'iPad puisqu'il n'y a pas d'événements tels que mouseOut et mouseMove?

Core jQuery n'a rien de spécial pour les événements tactiles, mais vous pouvez facilement créer le vôtre en utilisant les événements suivants

• touchstart
• toucher
• toucher
• toucher annuler

Par exemple, le touchmove

document.addEventListener('touchmove', function(e) {
    e.preventDefault();
    var touch = e.touches[0];
    alert(touch.pageX + " - " + touch.pageY);
}, false);

Cela fonctionne dans la plupart des navigateurs basés sur WebKit (y compris Android).

Voici une bonne documentation .

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

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

L'approche la plus simple consiste à utiliser une bibliothèque JavaScript multitouch telle que Hammer.js . Ensuite, vous pouvez écrire du 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 prend en charge le tap, double tap, glisser, maintenir, transformer (c.-à-pincer) et faire glisser. Les événements tactiles se déclenchent également lorsque des actions de souris équivalentes se produisent, vous n'avez donc pas besoin d'écrire deux ensembles de gestionnaires d'événements. Oh, et vous avez besoin du plugin jQuery si vous voulez pouvoir écrire de la manière jQueryish comme je l'ai fait.

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

$(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 want to execute on tap

       }
 });

Je l'ai testé et cela fonctionne bien pour moi sur iPad et iPhone. Il détecte le tap et peut distinguer facilement le tap et le défilement tactile.

Vous pouvez utiliser .on () pour capturer plusieurs événements, puis tester le toucher sur l'écran, 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 la page jQuery Mobile Events les différents événements tactiles, qui fonctionnent également sur des appareils autres que iOS.

Elles sont:

• robinet
• taphold
• glisser
• swipeleft
• swiperight

Notez également que pendant les événements de défilement (basés sur le toucher sur les appareils mobiles), les appareils iOS gèlent la manipulation du DOM lors du défilement.

J'étais un peu inquiet de n'utiliser que touchmove pour mon projet, car il ne semble se déclencher que lorsque votre contact se déplace d'un endroit à un autre (et non lors du contact initial). Je l'ai donc combiné avec le touchstart , et cela semble très bien fonctionner 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 viens de tester le plugin GitHub jQuery Touch Events de benmajor pour les versions 1.4 et 1.7+ de jQuery. Il est léger et fonctionne parfaitement avec les deux onet bindtout en fournissant un support pour un ensemble complet d'événements tactiles.