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


191

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?

Antworten:


240

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 .


2
Vielen Dank David, ich denke es wird funktionieren, aber was ist e.touches [0]? Können Sie das Argument "e" detailliert beschreiben?
Abhishek B.

7
e ist das Ereignisobjekt, das automatisch an den Handler übergeben wird. Für den Safari-Browser (und auch für Android) enthält er jetzt eine Reihe aller Berührungen, die der Benutzer auf dem Bildschirm vorgenommen hat. Jede Berührung hat ihre eigenen Eigenschaften (z. B. x, y-Koordinaten)
David Pean

1
jetzt , wie gehen Sie über die Suche nach was Element Triggerereignis auf -__-
Muhammad Umer

148

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

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

1
Ja, Timothy, ich habe zu Beginn meines Projekts noch keine Version 1.7+ verwendet. jetzt onwords ich benutze jquery 1.7+ .. Danke für guten Vorschlag & Antwort .. Vielen Dank. :)
Abhishek B.

7
Das funktioniert gut. Ich brauchte Klick und Touchstart, um dasselbe zu tun, und ich bin an die Nicht-Objekt-Syntax $('#whatever').on('touchstart click', function(){ /* do something... */ });
gewöhnt

1
Wenn ich gehe $('#whatever').on({ 'touchstart' : function(ev){}});, evscheint es keine Informationen über die Berührungen zu geben (Berührungen, Zielberührungen oder veränderte Berührungen)
Octopus

8
@ Octopus: Die Touch-Informationen finden Sie unter ev.originalEvent.
Peter Bloomfield

1
@edonbajrami ja natürlich. Überprüfen Sie die Dokumente und suchen Sie nach "delegierten Ereignissen". $ ("# Element, das auf neue Elemente überwacht werden soll"). on ("eventX", "#element", Funktion (Ereignis) {/ * was auch immer * /});
Honk31

24

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.


29
Die "einfachste" Lösung besteht nie darin, ein Problem durch Hinzufügen von Bibliotheken komplizierter zu machen
Octopus

13
@Octopus Die einfachste Lösung ist die Verwendung von hammer.js, mit der browserübergreifende Kopfschmerzen beseitigt werden. Verwenden Sie die jQuery-Erweiterung, um sich in Ihrer vertrauten Zone zu befinden. Kommt mir nicht zu kompliziert vor.
Trusktr

1
Die vermeintlich "einfachste" Lösung ist oft die, die die Leute am meisten vermasseln. Was auch immer Sie tun, vergessen Sie nicht, sicherzustellen, dass Ihre Lösung auf Geräten funktioniert, die sowohl Touch als auch Maus unterstützen, wie Microsoft Surface
Simon_Weaver

1
@ Octopus: "Wenn alles, was Sie haben, ein Hammer ist ... alles sieht aus wie ein Nagel" :)
Gone Coding

Es ist Hammerzeit! Vielen Dank, dass Sie diese Bibliothek freigegeben haben. Es war einfach, sie auf meiner Anwendung zu installieren und loszulegen! Die Einrichtung dauerte eine Sekunde, da der Ereignishandler anders ist, aber ein einfaches console.log (Ereignis) sagt Ihnen, was Sie brauchen. VIELEN DANK!
Andy

24

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.


2
Diese Lösung scheint die einfachste zu sein, die ich gefunden habe, und scheint unter iOS hervorragend zu funktionieren.
Joshua Lawrence Austill

Ich habe zuerst jquery mobile verwendet, aber dann hat es andere Funktionen beeinträchtigt. Ich benutze dies jetzt und funktioniert perfekt. Bisher keine Probleme.
Anurag Priyadarshi

18

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

außer das .bindist veraltet. Sie sollten verwenden.on
jcuenod

15

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.


Vielen Dank für Ihre wichtige Zeit für meine Frage. Ich schaue in Jquery Mobile-Veranstaltungen. Vielen Dank.
Abhishek B.

Diese Ereignisse sind nicht wirklich repräsentativ für echte Berührungsinteraktionen.
Trusktr

Ist jQuery Core ein tatsächliches Eigenname?
Peter Mortensen

6

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 dies auch hinzugefügt, um festzustellen, wie viel Zeit seit dem letzten Ereignis vergangen ist.document.getElementById("ttime").innerHTML = ((new Date()) - touchTime); touchTime = new Date();
Hanamj

3

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.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.