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


193

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?

Réponses:


243

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 .


2
Merci beaucoup David, je pense que ça marchera mais qu'est-ce que e.touches [0]? pouvez-vous décrire l'argument "e" en détail?
Abhishek B.21

7
e est l'objet événement qui est automatiquement transmis au gestionnaire. Pour le navigateur Safari (et Android aussi), il contient maintenant un tableau de toutes les touches que l'utilisateur a effectuées sur l'écran. Chaque contact a ses propres propriétés (x, y coords par exemple)
David Pean

1
maintenant, comment allez-vous trouver quel élément déclencher l'événement sur -__-
Muhammad Umer

Notez que la bonne réponse est celle faite par Timothy Perez, celle-ci n'est pas mise à jour.
EPurpl3

149

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

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

1
Oui, Timothy, je n'étais pas utilisé en version 1.7+ au moment où je démarre mon projet. maintenant onwords j'utilise jquery 1.7+ .. Merci pour la bonne suggestion et réponse .. Merci beaucoup. :)
Abhishek B.

7
Cela fonctionne bien. J'avais besoin de click and touchstart pour faire la même chose, et je suis habitué à la syntaxe non-objet, comme$('#whatever').on('touchstart click', function(){ /* do something... */ });
goodeye

1
quand j'y vais $('#whatever').on({ 'touchstart' : function(ev){}});, evne semble pas avoir d'informations sur les touches (touches, cibles ou changées)
Octopus

8
@Octopus: Vous trouverez les informations sur les touches sous ev.originalEvent.
Peter Bloomfield

1
@edonbajrami oui, bien sûr. vérifiez les documents et recherchez les "événements délégués". $ ("# élément à surveiller pour de nouveaux éléments"). on ("eventX", "#element", function (event) {/ * peu importe * /});
honk31

24

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.


29
la solution la plus "simple" n'implique jamais de compliquer un problème en ajoutant des bibliothèques
Octopus

13
@Octopus La solution la plus simple consiste à utiliser hammer.js qui résout les maux de tête entre navigateurs. Utilisez l'extension jQuery pour être dans votre zone familière. Cela ne me semble pas trop compliqué.
trusktr

1
la solution supposée «la plus simple» est souvent celle que les gens foutent le plus ... quoi que vous fassiez, n'oubliez pas de vous assurer que votre solution fonctionne sur des appareils
prenant en

1
@Octopus: "Quand tout ce que vous avez est un marteau [sic] ... tout ressemble à un clou" :)
Gone Coding

C'est L'HEURE DU MARTEAU! Merci d'avoir partagé cette bibliothèque, elle a été facile à installer sur mon application et à démarrer! Il a fallu une seconde pour la configuration car le gestionnaire d'événements est différent, mais un simple console.log (événement) vous indique ce dont vous avez besoin. MERCI!
Andy

24

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.


2
Cette solution semble être la plus simple que j'ai trouvée et semble fonctionner très bien sur iOS.
Joshua Lawrence Austill

J'ai d'abord utilisé jquery mobile, mais ensuite cela a interféré avec d'autres fonctionnalités. Je l'utilise maintenant et fonctionne parfaitement. Aucun problème pour l'instant.
Anurag Priyadarshi

20

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

sauf que .bindc'est obsolète. Vous devriez utiliser.on
jcuenod

15

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.


Merci de donner votre temps important pour ma question. Je regarde dans les événements Jquery Mobile .. Merci.
Abhishek B.29

Ces événements ne sont pas vraiment représentatifs d'une interaction tactile réelle.
trusktr

Est-ce que jQuery Core est un nom propre?
Peter Mortensen

6

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>

J'ai également ajouté ceci pour détecter le temps écoulé depuis le dernier événement ..document.getElementById("ttime").innerHTML = ((new Date()) - touchTime); touchTime = new Date();
hanamj

3

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.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.