Wie können Sie feststellen, dass ein Benutzer seinen Finger mit JavaScript in eine Richtung über eine Webseite bewegt hat?
Ich habe mich gefragt, ob es eine Lösung gibt, die für Websites sowohl auf dem iPhone als auch auf einem Android-Telefon funktioniert.
Antworten:
Einfaches Vanilla JS-Codebeispiel:
In Android getestet.
quelle
touchstart
isttouchmove
?Basierend auf der Antwort von @ givanse können Sie dies folgendermaßen tun
classes
:Sie können es dann so verwenden:
quelle
.bind
undefined aufzurufen, eine Ausnahme erhalten, weil SiehandleTouchMove
tatsächlich nichts zurückgegeben haben. Außerdem ist es sinnlos, bind aufzurufen, wenn eine Funktion mit aufgerufen wird,this.
da sie bereits an den aktuellen Kontext gebunden ist.bind(this);
und es hat anmutig funktioniert. danke @nicholas_rtouches[0]
zuchangedTouches[0]
und der EreignishandlertyphandleTouchMove
zuhandleTouchEnd
run()
zweimal an und Sie bekommen ein böses SpeicherleckIch habe einige der Antworten hier in einem Skript zusammengeführt, das CustomEvent verwendet , um geklaute Ereignisse im DOM auszulösen. Fügen Sie Ihrer Seite das Skript 0,7k swiped- events.min.js hinzu und warten Sie auf geklaute Ereignisse:
nach links gewischt
nach rechts gewischt
gewischt
runtergewischt
Sie können auch direkt an ein Element anhängen:
Optionale Konfiguration
Sie können die folgenden Attribute angeben, um die Funktionsweise der Swipe-Interaktion auf Ihrer Seite zu optimieren (diese sind optional) .
Der Quellcode ist auf Github verfügbar
quelle
Was ich zuvor verwendet habe, ist, dass Sie das Mousedown-Ereignis erkennen, seine x-, y-Position (je nachdem, was relevant ist) aufzeichnen, dann das Mouseup-Ereignis erkennen und die beiden Werte subtrahieren müssen.
quelle
jQuery Mobile bietet auch Swipe-Unterstützung: http://api.jquerymobile.com/swipe/
Beispiel
quelle
Ich habe festgestellt, dass die brillante Antwort von @givanse für mehrere mobile Browser die zuverlässigste und kompatibelste ist, um Swipe-Aktionen zu registrieren.
Es ist jedoch eine Änderung in seinem Code erforderlich, damit er in modernen mobilen Browsern funktioniert, die ihn verwenden
jQuery
.event.touches
existiert nicht, wennjQuery
es verwendet wird und führtundefined
und ersetzt werden durchevent.originalEvent.touches
. OhnejQuery
,event.touches
sollte gut funktionieren.So wird die Lösung,
Getestet am:
quelle
event.originalEvent
. Das Dingevent.touches
hat aufgehört zu existieren und führt dazuundefined
.event.originalEvent
. Ich werde meine Antwort aktualisieren. Vielen Dank! :)Ich habe
TouchWipe
als kurzes jquery-Plugin neu verpackt :detectSwipe
quelle
Einige Mods der besten Antwort (kann nicht kommentieren ...), um mit kurzen Wischbewegungen umzugehen
quelle
trashold, timeout swipe, swipeBlockElems hinzufügen.
quelle
Wenn jemand versucht, jQuery Mobile unter Android zu verwenden, und Probleme mit der JQM-Swipe-Erkennung hat
(Ich hatte einige auf Xperia Z1, Galaxy S3, Nexus 4 und einigen Wiko-Handys) Dies kann nützlich sein:
Swipe on Android wurde nicht erkannt, es sei denn, es war ein sehr langer, präziser und schneller Swipe.
Mit diesen beiden Zeilen funktioniert es richtig
quelle
$.event.special.swipe.scrollSupressionThreshold = 8;
aber du hast mich in die richtige Richtung gebracht! Danke dir!Ich hatte Probleme damit, dass der Touchend-Handler kontinuierlich feuerte, während der Benutzer einen Finger herumzog. Ich weiß nicht, ob das an etwas liegt, was ich falsch mache oder nicht, aber ich habe dies neu verkabelt, um Bewegungen mit touchmove zu akkumulieren, und touchend löst tatsächlich den Rückruf aus.
Ich brauchte auch eine große Anzahl dieser Instanzen und fügte daher Aktivierungs- / Deaktivierungsmethoden hinzu.
Und eine Schwelle, bei der ein kurzer Schlag nicht ausgelöst wird. Touchstart Null ist jedes Mal die Zähler.
Sie können den target_node im laufenden Betrieb ändern. Bei Erstellung aktivieren ist optional.
quelle
Ich habe auch einige der Antworten zusammengeführt, hauptsächlich die erste und die zweite mit Klassen, und hier ist meine Version:
Danach kann es wie folgt verwendet werden:
Es hilft, Konsolenfehler zu vermeiden, wenn Sie nur die Methode "onLeft" aufrufen möchten.
quelle
Verwendete zwei:
jQuery Mobile: Funktioniert in den meisten Fällen und insbesondere dann, wenn Sie eine Anwendung entwickeln, die ein anderes jQuery-Plugin verwendet, als die jQuery Mobile-Steuerelemente besser zu verwenden. Besuchen Sie es hier: https://www.w3schools.com/jquerymobile/jquerymobile_events_touch.asp
Hammerzeit! Eine der besten, leichtesten und schnellsten Javascript-basierten Bibliotheken. Besuchen Sie es hier: https://hammerjs.github.io/
quelle
Wenn Sie nur wischen müssen, ist es besser, wenn Sie nur das Teil verwenden, das Sie benötigen. Dies sollte auf jedem Touch-Gerät funktionieren.
Dies sind ~ 450 Bytes nach gzip-Komprimierung, Minimierung, Babel usw.
Ich habe die folgende Klasse basierend auf den anderen Antworten geschrieben. Sie verwendet den Prozentsatz der verschobenen Pixel anstelle von Pixeln und ein Ereignis-Dispatcher-Muster, um Dinge zu verknüpfen / zu lösen.
Verwenden Sie es so:
quelle
Ich wollte nur das Wischen nach links und rechts erkennen, aber die Aktion erst auslösen, wenn das Berührungsereignis endet. Deshalb habe ich die großartige Antwort von @ givanse leicht geändert, um dies zu tun.
Warum das tun? Wenn der Benutzer beispielsweise beim Wischen bemerkt, dass er endlich nicht wischen möchte, kann er seinen Finger an die ursprüngliche Position bewegen (eine sehr beliebte "Dating" -Telefonanwendung tut dies;)) und dann das "Wischen nach rechts". Veranstaltung wird abgesagt.
Um ein "nach rechts wischen" -Ereignis zu vermeiden, nur weil es horizontal einen Unterschied von 3 Pixel gibt, habe ich einen Schwellenwert hinzugefügt, unter dem ein Ereignis verworfen wird: Um ein "nach rechts wischen" -Ereignis zu haben, muss der Benutzer mindestens wischen 1/3 der Browserbreite (natürlich können Sie dies ändern).
All diese kleinen Details verbessern die Benutzererfahrung. Hier ist der (Vanilla JS) Code:
quelle
Einfaches Vanille-JS-Beispiel für horizontales Wischen:
Sie können für vertikales Wischen ziemlich dieselbe Logik verwenden.
quelle
Zu dieser Antwort hier hinzufügen . Dieser bietet Unterstützung für Mausereignisse zum Testen auf dem Desktop:
quelle
Ein Beispiel für die Verwendung mit Offset.
quelle
Möglicherweise fällt es Ihnen leichter, es zuerst mit Mausereignissen als Prototyp zu implementieren.
Es gibt hier viele Antworten, einschließlich der oberen, die mit Vorsicht verwendet werden sollten, da sie Randfälle nicht berücksichtigen, insbesondere in der Nähe von Begrenzungsrahmen.
Sehen:
Sie müssen experimentieren, um Kantenfälle und Verhaltensweisen zu erfassen, z. B. den Zeiger, der sich vor dem Ende außerhalb des Elements bewegt.
Ein Wischen ist eine sehr grundlegende Geste, bei der es sich um eine höhere Ebene der Interaktionsverarbeitung von Schnittstellenzeigern handelt, die ungefähr zwischen der Verarbeitung von Rohereignissen und der Handschrifterkennung liegt.
Es gibt keine exakte Methode zum Erkennen eines Schlagens oder Schleuderns, obwohl praktisch alle im Allgemeinen einem Grundprinzip des Erkennens einer Bewegung über ein Element mit einem Schwellenwert für Entfernung, Geschwindigkeit oder Geschwindigkeit folgen. Man könnte einfach sagen, wenn sich innerhalb einer bestimmten Zeit eine Bewegung über 65% der Bildschirmgröße in eine bestimmte Richtung bewegt, handelt es sich um einen Wisch. Es liegt an Ihnen, wo Sie die Linie ziehen und wie Sie sie berechnen.
Einige betrachten es möglicherweise auch aus der Perspektive des Impulses in eine Richtung und wie weit es vom Bildschirm entfernt ist, wenn das Element losgelassen wird. Dies ist klarer bei klebrigen Wischbewegungen, bei denen das Element gezogen werden kann und dann beim Loslassen entweder zurückprallt oder vom Bildschirm fliegt, als ob das Gummiband gebrochen wäre.
Es ist wahrscheinlich ideal, um zu versuchen, eine Gestenbibliothek zu finden, die Sie entweder portieren oder wiederverwenden können und die üblicherweise aus Gründen der Konsistenz verwendet wird. Viele der Beispiele hier sind zu simpel und registrieren einen Schlag als die geringste Berührung in eine beliebige Richtung.
Android wäre die offensichtliche Wahl, hat aber das gegenteilige Problem, es ist zu komplex.
Viele Menschen scheinen die Frage als eine Bewegung in eine Richtung falsch interpretiert zu haben. Ein Schlag ist eine breite und relativ kurze Bewegung, die überwiegend in eine Richtung geht (obwohl sie bogenförmig sein kann und bestimmte Beschleunigungseigenschaften aufweist). Ein Fling ist ähnlich, beabsichtigt jedoch, einen Gegenstand aus eigener Kraft beiläufig ein gutes Stück wegzutreiben.
Die beiden sind sich so ähnlich, dass einige Bibliotheken möglicherweise nur Fling oder Swipe bereitstellen, die austauschbar verwendet werden können. Auf einem Flachbildschirm ist es schwierig, die beiden Gesten wirklich zu trennen, und im Allgemeinen tun die Leute beides (Wischen des physischen Bildschirms, aber Schleudern des auf dem Bildschirm angezeigten UI-Elements).
Sie können es am besten nicht selbst tun. Es gibt bereits eine große Anzahl von JavaScript-Bibliotheken zum Erkennen einfacher Gesten .
quelle
Ich habe die Lösung von @givanse überarbeitet von um als React-Hook zu fungieren. Die Eingabe ist ein optionaler Ereignis-Listener. Die Ausgabe ist eine funktionale Referenz (muss funktionsfähig sein, damit der Hook erneut ausgeführt werden kann, wenn sich die Referenz ändert).
Wird auch im vertikalen / horizontalen Swipe-Schwellenwertparameter hinzugefügt, damit kleine Bewegungen die Ereignis-Listener nicht versehentlich auslösen. Diese können jedoch auf 0 gesetzt werden, um die ursprüngliche Antwort genauer nachzuahmen.
Tipp: Für eine optimale Leistung sollten die Eingabefunktionen des Ereignis-Listeners gespeichert werden.
quelle