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

Core jQuery n’a rien de spécial pour les événements tactiles, mais vous pouvez facilement créer vos propres événements en utilisant les événements suivants

• touche de touche
• toucher
• toucher
• touchcancel

Par exemple, la 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 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 comme 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 tapotez, glissez, maintenez, transformez (c.-à-d. Pincer) et faites 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 façon jQueryish comme je l’ai fait.

Vous pouvez utiliser .on () pour capturer plusieurs événements, puis tester 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 } }); 

Utiliser Touchstart ou Touch Touch seul n’est pas une bonne solution, car si vous faites défiler la page, le périphérique le détecte aussi en le touchant ou en tapant. Ainsi, le meilleur moyen de détecter simultanément un événement de clic et de clic est de 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 wanna execute on tap } }); 

Je l’ai testé et cela fonctionne très bien pour moi sur iPad et iPhone. Il détecte le tapotement et permet de distinguer le tapotement et le toucher facilement.

jQuery Core n’a rien de spécial, mais vous pouvez lire sur la page Événements mobiles jQuery sur différents événements tactiles, qui fonctionnent également sur d’autres appareils que iOS.

Elles sont:

• robinet
• taphold
• faire glisser
• swipeleft
• étincelle

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 de la touchmove pour mon projet, car cela ne semble se déclencher que lorsque votre toucher se déplace d’un endroit à un autre (et non au toucher initial). Je l’ai donc combiné avec touchstart , et cela semble très bien fonctionner pour le toucher initial et les mouvements.

  X: 
0
 Y: 
0 

Je sais que je suis un peu en retard sur ce sujet, mais je viens juste 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 à la fois on et en bind tout en prenant en charge un ensemble exhaustif d’événements tactiles.