web-dev-qa-db-fra.com

Comment reconnaître les événements tactiles avec jQuery dans Safari pour iPad? C'est possible?

Est-il possible de reconnaître des é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 comme mouseOut, mouseMove?

jqueryeventsipadjavascript-eventsmobile-safari
186
Abhishek B.

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
  • touchercancel

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:

234
David Pean

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

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

La méthode 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 tapotement, tapotement double, glisser, tenir, transformer (pincer) et faire glisser. Les événements tactiles se déclenchent également lorsque des actions équivalentes de la souris 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.

24
David Johnstone

L'utilisation de touchstart ou touchend seul n'est pas une bonne solution, car si vous faites défiler la page, l'appareil le détecte comme tactile ou tactile. Ainsi, le meilleur moyen de détecter un événement tactile en même temps consiste simplement à détecter les événements tactiles qui ne déplacent pas l'écran (défilement). Donc, 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 bien pour moi sur iPad et iPhone. Il détecte le toucher et peut distinguer le toucher et le défilement tactile facilement.

24
Iman Sedighi

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

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

Elles sont:

  • robinet
  • taphold
  • swipe
  • swipeleft
  • swiperight

Notez également que lors des événements de défilement (en fonction du toucher sur les appareils mobiles), les appareils iOS gèlent la manipulation du DOM lors du défilement.

15
Karol

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 au contact initial). Alors je l'ai combiné avec touchstart, et cela semble très bien fonctionner pour le contact 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>
5
hanamj

Je sais que je suis un peu en retard mais que je viens de tester plug-in GitHub jQuery Touch Events de Benmajor pour les versions 1.4 et 1.7+ de JQuery. Il est léger et fonctionne parfaitement avec on et bind tout en prenant en charge un ensemble exhaustif d’événements tactiles.

3
Rohan