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

Question

Est il possible de reconnaître toucher événements sur le navigateur Safari de l’iPad à l’aide de jQuery ?

J’ai utilisé des évènements mouseOver et mouseOut dans une application web. Y a-t-il aucun événement similaire pour le navigateur Safari de l’iPad puisqu’il n’y a aucun événement comme mouseOut, mouseMove ?

Answer 1

Base jQuery n'a rien de spécial pour les événements tactiles, mais vous pouvez facilement construire votre propre en utilisant les événements suivants

• évènements touchstart
• touchmove
• touchend
• touchcancel

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 (incl. android).

Voici quelques bonnes documenation: http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html

Answer 2

Si vous utilisez jQuery 1,7 + C’est même plus simple que toutes ces autres réponses.

Answer 3

L'approche la plus simple est d'utiliser un multitouch bibliothèque JavaScript 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 toucher, le double tap, glisser, tenir, de transformation (c'est à dire, une pincée) et faites-la glisser. Les événements tactiles également d'incendie lors de l'équivalent en actions de la souris se produire, de sorte que 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 être en mesure d'écrire dans le jQueryish façon comme je l'ai fait.

Answer 4

jQuery Core n'a rien de spécial, mais vous pouvez lire sur la page jQuery Mobile Events des événements tactiles différents, 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.

Answer 5

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.

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