Wie kann ich Berührungsereignisse mit jQuery in Safari für iPad erkennen? Ist es möglich?

Ist es möglich, Berührungsereignisse im Safari-Browser des iPad mit jQuery zu erkennen?

Ich habe die Ereignisse mouseOver und mouseOut in einer Webanwendung verwendet. Gibt es ähnliche Ereignisse für den Safari-Browser des iPad, da es keine Ereignisse wie mouseOut und mouseMove gibt?

Core jQuery hat nichts Besonderes für Touch-Ereignisse, aber Sie können mit den folgenden Ereignissen ganz einfach Ihre eigenen erstellen

• Touchstart
• touchmove
• Touchend
• Touchcancel

Zum Beispiel die touchmove

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

Dies funktioniert in den meisten WebKit- basierten Browsern (einschließlich Android).

Hier ist eine gute Dokumentation .

Wenn Sie jQuery 1.7+ verwenden, ist dies noch einfacher als all diese anderen Antworten.

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

Der einfachste Ansatz ist die Verwendung einer Multitouch-JavaScript-Bibliothek wie Hammer.js . Dann können Sie Code schreiben wie:

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

Und du kannst weitermachen. Es unterstützt Tippen, Doppeltippen, Wischen, Halten, Transformieren (dh Kneifen) und Ziehen. Die Berührungsereignisse werden auch ausgelöst, wenn entsprechende Mausaktionen ausgeführt werden, sodass Sie nicht zwei Sätze von Ereignishandlern schreiben müssen. Oh, und Sie benötigen das jQuery-Plugin, wenn Sie wie ich auf jQueryish-Weise schreiben möchten.

Die Verwendung von Touchstart oder Touchend allein ist keine gute Lösung, da das Gerät beim Scrollen der Seite diese auch als Berührung oder Tippen erkennt. Der beste Weg, um ein Tipp- und Klickereignis gleichzeitig zu erkennen, besteht darin, nur die Berührungsereignisse zu erkennen, die den Bildschirm nicht bewegen (Scrollen). Fügen Sie dazu einfach Ihren Code zu Ihrer Anwendung hinzu:

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

       }
 });

Ich habe es getestet und es funktioniert gut für mich auf iPad und iPhone. Es erkennt das Tippen und kann das Tippen und Berühren leicht unterscheiden.

Sie können .on () verwenden , um mehrere Ereignisse zu erfassen und dann auf Berührung auf dem Bildschirm zu testen, z.

$('#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 hat nichts Besonderes, aber Sie können auf der Seite jQuery Mobile Events Informationen zu verschiedenen Touch-Ereignissen lesen , die auch auf anderen als iOS-Geräten funktionieren.

Sie sind:

• Zapfhahn
• Taphold
• wischen
• nach links wischen
• wische nach rechts

Beachten Sie auch, dass iOS-Geräte während Bildlaufereignissen (basierend auf Berührungen auf Mobilgeräten) die DOM-Manipulation während des Bildlaufs einfrieren.

Ich war ein wenig besorgt darüber, nur Touchmove für mein Projekt zu verwenden, da es nur dann ausgelöst wird , wenn sich Ihre Berührung von einem Ort zum anderen bewegt (und nicht bei der ersten Berührung). Also habe ich es mit Touchstart kombiniert , und dies scheint für die erste Berührung und alle Bewegungen sehr gut zu funktionieren.

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

Ich habe gerade das GitHub jQuery Touch Events-Plugin von benmajor für die Versionen 1.4 und 1.7+ von jQuery getestet. Es ist leicht und funktioniert perfekt mit beiden onund bindbietet gleichzeitig Unterstützung für eine umfassende Reihe von Berührungsereignissen.