M

MLOG

Deutsch

Entdecken Sie die Welt der Touch-Gesten und lernen Sie, wie Sie diese in Ihren JavaScript-Projekten implementieren. Dieser Leitfaden deckt alles ab, von einfachen Touch-Events bis zu fortgeschrittenen Techniken zur Gestenerkennung.

Touch-Gesten: Eine umfassende Anleitung zur JavaScript-Implementierung

In der heutigen Mobile-First-Welt sind Touch-Gesten zu einem integralen Bestandteil der Benutzererfahrung geworden. Von einfachen Tippgesten bis hin zu komplexen Interaktionen mit mehreren Fingern bieten Touch-Gesten eine natürliche und intuitive Möglichkeit für Benutzer, mit Webanwendungen zu interagieren. Dieser umfassende Leitfaden erkundet die Welt der Touch-Gesten und bietet einen schrittweisen Ansatz zur Implementierung in Ihren JavaScript-Projekten.

Grundlagen der Touch-Events

Bevor wir uns mit der Gestenerkennung befassen, ist es entscheidend, die zugrunde liegenden Touch-Events zu verstehen, die diese Interaktionen ermöglichen. JavaScript bietet eine Reihe von Events, die ausgelöst werden, wenn ein Benutzer den Bildschirm berührt. Diese Events liefern Informationen über die Berührung, wie z. B. ihre Position und ihren Zustand.

Grundlegende Touch-Events:

Jedes dieser Events enthält eine `touches`-Eigenschaft, die eine Liste von `Touch`-Objekten ist. Jedes `Touch`-Objekt repräsentiert einen einzelnen Kontaktpunkt auf dem Bildschirm und enthält Informationen wie:

Beispiel: Protokollierung von Touch-Koordinaten

Dieses einfache Beispiel zeigt, wie man die Koordinaten eines Berührungspunkts protokolliert, wenn der Benutzer den Bildschirm berührt:


 document.addEventListener('touchstart', function(event) {
  event.preventDefault(); // Verhindert das Standardverhalten des Browsers (z. B. Scrollen)
  let touch = event.touches[0];
  console.log('Berührung gestartet bei X: ' + touch.clientX + ', Y: ' + touch.clientY);
 });

Hinweis: Die `preventDefault()`-Methode wird oft verwendet, um den Browser daran zu hindern, sein standardmäßiges Touch-Verhalten wie Scrollen oder Zoomen auszuführen.

Implementierung grundlegender Gesten

Mit einem soliden Verständnis von Touch-Events können wir nun grundlegende Gesten implementieren. Schauen wir uns Beispiele wie Tippen, Wischen und Ziehen an. Diese werden erklärt, indem zuerst definiert wird, was sie sind, und dann JavaScript-Beispiele bereitgestellt werden.

Tipp-Geste

Eine Tipp-Geste ist eine schnelle Berührung und Freigabe des Bildschirms. Um eine Tipp-Geste zu implementieren, können wir die `touchstart`- und `touchend`-Events verfolgen und die Zeitdifferenz zwischen ihnen messen. Wenn die Zeitdifferenz unter einem bestimmten Schwellenwert liegt (z. B. 200 Millisekunden), betrachten wir es als Tippen.


 let tapStartTime = null;

 document.addEventListener('touchstart', function(event) {
  tapStartTime = new Date().getTime();
 });

 document.addEventListener('touchend', function(event) {
  let tapEndTime = new Date().getTime();
  let tapDuration = tapEndTime - tapStartTime;

  if (tapDuration < 200) {
   console.log('Tippen erkannt!');
  }
 });

Wisch-Geste

Eine Wisch-Geste ist eine schnelle, gerichtete Bewegung über den Bildschirm. Um ein Wischen zu erkennen, müssen wir die Start- und Endpositionen der Berührung verfolgen und die Distanz und Richtung der Bewegung berechnen. Wir müssen auch die Dauer des Wischens berücksichtigen.


 let swipeStartX = null;
 let swipeStartY = null;

 document.addEventListener('touchstart', function(event) {
  swipeStartX = event.touches[0].clientX;
  swipeStartY = event.touches[0].clientY;
 });

 document.addEventListener('touchend', function(event) {
  let swipeEndX = event.changedTouches[0].clientX;
  let swipeEndY = event.changedTouches[0].clientY;
  let deltaX = swipeEndX - swipeStartX;
  let deltaY = swipeEndY - swipeStartY;
  let swipeDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);

  if (swipeDistance > 50) { // Passen Sie den Schwellenwert nach Bedarf an
   let angle = Math.atan2(deltaY, deltaX) * 180 / Math.PI;

   if (angle > -45 && angle <= 45) {
    console.log('Nach rechts wischen!');
   } else if (angle > 45 && angle <= 135) {
    console.log('Nach unten wischen!');
   } else if (angle > 135 || angle <= -135) {
    console.log('Nach links wischen!');
   } else {
    console.log('Nach oben wischen!');
   }
  }
 });

Zieh-Geste

Eine Zieh-Geste beinhaltet das Berühren eines Elements und das Verschieben über den Bildschirm. Um eine Zieh-Geste zu implementieren, müssen wir das `touchmove`-Event verfolgen und die Position des Elements entsprechend aktualisieren.


 let dragging = false;
 let offsetX, offsetY;
 let element = document.getElementById('draggableElement');

 element.addEventListener('touchstart', function(event) {
  dragging = true;
  offsetX = event.touches[0].clientX - element.offsetLeft;
  offsetY = event.touches[0].clientY - element.offsetTop;
 });

 document.addEventListener('touchmove', function(event) {
  if (dragging) {
   element.style.left = (event.touches[0].clientX - offsetX) + 'px';
   element.style.top = (event.touches[0].clientY - offsetY) + 'px';
  }
 });

 document.addEventListener('touchend', function(event) {
  dragging = false;
 });

Stellen Sie sicher, dass Sie ein Element mit der ID "draggableElement" in Ihrem HTML haben:


 
Zieh Mich!

Multi-Touch-Gesten

Multi-Touch-Gesten beinhalten die Verwendung mehrerer Finger zur Interaktion mit dem Bildschirm. Dies ermöglicht komplexere und ausdrucksstärkere Interaktionen wie Pinch-to-Zoom und Drehen.

Pinch-to-Zoom

Pinch-to-Zoom ist eine gängige Geste, um in ein Bild oder eine Karte hinein- und herauszuzoomen. Um Pinch-to-Zoom zu implementieren, müssen wir den Abstand zwischen zwei Berührungspunkten verfolgen und die Skalierung des Elements entsprechend anpassen.


 let initialDistance = null;
 let currentScale = 1;
 let element = document.getElementById('zoomableImage');

 function getDistance(event) {
  let touch1 = event.touches[0];
  let touch2 = event.touches[1];
  let x = touch2.clientX - touch1.clientX;
  let y = touch2.clientY - touch1.clientY;
  return Math.sqrt(x * x + y * y);
 }

 element.addEventListener('touchstart', function(event) {
  if (event.touches.length === 2) {
   initialDistance = getDistance(event);
  }
 });

 element.addEventListener('touchmove', function(event) {
  if (event.touches.length === 2) {
   event.preventDefault();
   let currentDistance = getDistance(event);
   let scaleFactor = currentDistance / initialDistance;
   currentScale *= scaleFactor; // Skalierung akkumulieren
   element.style.transform = 'scale(' + currentScale + ')';
   initialDistance = currentDistance; // Für die nächste Bewegung zurücksetzen
  }
 });

 element.addEventListener('touchend', function(event) {
  initialDistance = null;
 });

Stellen Sie sicher, dass Sie ein Bild mit der ID "zoomableImage" in Ihrem HTML haben:

Drehung

Die Drehung beinhaltet das Drehen eines Elements mit zwei Fingern. Um die Drehung zu implementieren, müssen wir den Winkel zwischen zwei Berührungspunkten verfolgen und das Element entsprechend drehen.


 let initialAngle = null;
 let currentRotation = 0;
 let element = document.getElementById('rotatableImage');

 function getAngle(event) {
  let touch1 = event.touches[0];
  let touch2 = event.touches[1];
  return Math.atan2(touch2.clientY - touch1.clientY, touch2.clientX - touch1.clientX) * 180 / Math.PI;
 }

 element.addEventListener('touchstart', function(event) {
  if (event.touches.length === 2) {
   initialAngle = getAngle(event);
  }
 });

 element.addEventListener('touchmove', function(event) {
  if (event.touches.length === 2) {
   event.preventDefault();
   let currentAngle = getAngle(event);
   let rotation = currentAngle - initialAngle;
   currentRotation += rotation; // Drehung akkumulieren
   element.style.transform = 'rotate(' + currentRotation + 'deg)';
   initialAngle = currentAngle; // Für die nächste Bewegung zurücksetzen
  }
 });

 element.addEventListener('touchend', function(event) {
  initialAngle = null;
 });

Stellen Sie sicher, dass Sie ein Bild mit der ID "rotatableImage" in Ihrem HTML haben:

Bibliotheken zur Gestenerkennung

Die Implementierung komplexer Gesten von Grund auf kann herausfordernd und zeitaufwändig sein. Glücklicherweise gibt es mehrere JavaScript-Bibliotheken, die den Prozess der Gestenerkennung vereinfachen können. Diese Bibliotheken bieten vorgefertigte Gestenerkenner und Hilfsprogramme zur Verarbeitung von Touch-Events.

Hammer.js

Hammer.js ist eine beliebte JavaScript-Bibliothek zur Erkennung von Gesten. Sie unterstützt eine breite Palette von Gesten, einschließlich Tippen, Doppeltippen, Wischen, Pinch, Drehen und Schwenken. Sie ist leichtgewichtig, einfach zu bedienen und in hohem Maße anpassbar. Hammer.js funktioniert, indem es auf Touch-Events lauscht und dann basierend auf der Position und Dauer der Berührungspunkte bestimmt, welche Aktion der Benutzer ausführt.


 // Binden Sie Hammer.js in Ihr HTML ein
 // 

 let element = document.getElementById('myElement');
 let hammer = new Hammer(element);

 hammer.on('tap', function(event) {
  console.log('Tipp-Event erkannt');
 });

 hammer.on('swipe', function(event) {
  console.log('Wisch-Event erkannt');
  console.log('Wischrichtung: ' + event.direction);
 });

 hammer.get('pinch').set({ enable: true });
 hammer.get('rotate').set({ enable: true });

 hammer.on('pinch', function(event) {
  console.log('Pinch-Event erkannt');
  element.style.transform = 'scale(' + event.scale + ')';
 });

 hammer.on('rotate', function(event) {
  console.log('Dreh-Event erkannt');
  element.style.transform = 'rotate(' + event.rotation + 'deg)';
 });

AlloyFinger

AlloyFinger ist eine weitere beliebte JavaScript-Bibliothek, die sich auf die Gestenerkennung spezialisiert hat, insbesondere für mobile Geräte. Sie ist bekannt für ihre geringe Größe und gute Leistung. Sie konzentriert sich auf gängige Touch-Gesten wie Tippen, Wischen, Pinch, Drehen und Drücken. Sie bietet eine einfach zu bedienende API zum Binden von Gesten an Elemente.


 // Binden Sie AlloyFinger in Ihr HTML ein
 //  // Ersetzen Sie dies mit Ihrem AlloyFinger-Pfad

 let element = document.getElementById('myElement');
 let af = new AlloyFinger(element, {
  tap: function() {
   console.log('Tipp-Event erkannt');
  },
  swipe: function(evt) {
   console.log('Wisch-Event erkannt');
   console.log('Wischrichtung: ' + evt.direction); // up, down, left, right
  },
  pinch: function(evt) {
   console.log('Pinch-Event erkannt');
   element.style.transform = 'scale(' + evt.scale + ')';
  },
  rotate: function(evt) {
   console.log('Dreh-Event erkannt');
   element.style.transform = 'rotate(' + evt.angle + 'deg)';
  }
 });

Überlegungen zur Barrierefreiheit

Bei der Implementierung von Touch-Gesten ist es unerlässlich, die Barrierefreiheit für Benutzer mit Behinderungen zu berücksichtigen. Einige Benutzer können aufgrund motorischer Beeinträchtigungen möglicherweise keine Touch-Gesten verwenden. Die Bereitstellung alternativer Eingabemethoden wie Tastatursteuerung oder Sprachbefehle stellt sicher, dass Ihre Anwendung für ein breiteres Publikum zugänglich ist.

Leistungsoptimierung

Touch-Events können rechenintensiv sein, insbesondere bei der Verarbeitung komplexer Gesten. Die Optimierung Ihres Codes für die Leistung ist entscheidend, um eine reibungslose und reaktionsschnelle Benutzererfahrung zu gewährleisten.

Browserübergreifende Kompatibilität

Die Unterstützung von Touch-Events variiert zwischen verschiedenen Browsern und Geräten. Es ist entscheidend, Ihren Code auf einer Vielzahl von Browsern und Geräten zu testen, um eine browserübergreifende Kompatibilität sicherzustellen. Erwägen Sie die Verwendung von Polyfills oder Bibliotheken, die Browserunterschiede abstrahieren.

Überlegungen zur Internationalisierung (i18n)

Denken Sie bei der Implementierung von Touch-Gesten daran, die Internationalisierung (i18n) zu berücksichtigen. Während Touch-Interaktionen selbst im Allgemeinen sprachunabhängig sind, sollten die umgebenden UI-Elemente und Feedback-Mechanismen für verschiedene Sprachen und Regionen lokalisiert werden.

Globale Beispiele und Überlegungen

Betrachten wir, wie Touch-Gesten in verschiedenen globalen Kontexten unterschiedlich angewendet werden könnten:

Fazit

Touch-Gesten sind ein mächtiges Werkzeug zur Schaffung ansprechender und intuitiver Benutzererfahrungen. Durch das Verständnis der zugrunde liegenden Touch-Events und die Verwendung geeigneter Techniken zur Gestenerkennung können Sie eine breite Palette von Gesten in Ihren JavaScript-Projekten implementieren. Denken Sie daran, Barrierefreiheit, Leistung und browserübergreifende Kompatibilität zu berücksichtigen, um sicherzustellen, dass Ihre Anwendung für alle Benutzer gut funktioniert. Mit dem technologischen Fortschritt sind neue Arten von Gesten und Interaktionen zu erwarten; bilden Sie sich kontinuierlich weiter, um an der Spitze der digitalen Erlebnisse zu bleiben.