Vanilla Javascript Swipe – Wischen und Ziehen

Touch-Geste Swipe

Ein Swipe von Rechts nach Links oder Links nach Rechts holt den Screen einer zuvor oder danach besuchten Seite auf den Screen. Fast immer kommen Galerien mit Swipe als Plugin für WordPress, jQuery steuert die Galerie, für Swipe kommt dann noch hammer.js hinzu. Eine Menge Overhead für eine kleine Geste. Dabei geht das auch ohne jQuery und hammer.js.

Ein swipe- oder onswipe-Event gibt es nicht, sondern ein Swipe wird durch touchstart und touchend entdeckt, wenn der Finger über eine Distanz hinweg nicht angehoben wird. Dabei hinkt Javascript schon lange nicht mehr hinter jQuery hinterher. Um ein einfaches Swipe von rechts nach links oder von links nach rechts zu entdecken, braucht Javascript nur wenige Zeilen. Hinter "Swipe" steckt ein einfaches touchstart-Event sowie das Auslesen, auf welchen Koordinaten der Finger die Touchfläche verläßt.

<div class="result"></div>
<div class="swipeDetector lock-screen" draggable="true"></div>

let touchstartX = 0
let touchendX = 0
    
function whichDirection() {
  if (touchendX < touchstartX) document.querySelector(".result").innerHTML = "Swipe nach Links";
  if (touchendX > touchstartX) document.querySelector(".result").innerHTML = "Swipe nach Rechts";
}

document.querySelector(".swipeDetector").addEventListener('touchstart', evt => {
  touchstartX = evt.changedTouches[0].screenX;
})

document.querySelector(".swipeDetector").addEventListener('touchend', evt => {
  touchendX = evt.changedTouches[0].screenX;
  whichDirection();
});

changedTouches (nur lesender Zugriff) ist eine Liste von Touch-Punkten:

• Beim Touchstart-Event enthält die Liste die Touch-Punkte, die beim Beginn des Touch-Events aktiv waren.
• Beim Touchmove-Event enthält changedTouches die Punkte, die sich seit dem vorgegangenen Event geändert haben.
• Beim Touchend-Event enthält changedTouches die Punkte, an denen der Finger von der Touchfläche hochgehoben wurde.

Am Rande: In CSS ist die Eigenschaft scroll-snap zuverlässig in den modernen Browsern angekommen. Ein Stupser mit dem Finger oder ein Wischen mit der Maus reicht.

Koordinaten bei touchmove-Events

Beim Swipe wird der Finger über die Oberfläche in eine bestimmte Richtung gezogen. Ein onswipe-Event gibt es so in Javascript nicht, dabei ist diese Geste für viele Effekte interessanter als ein einfacher Touch (z.B. beim Blättern durch einen Slider, in dem die Vorwärts- und Rückwärts-Symbole für kleine Monitore eine Barriere sind).

touchstart, touchmove und touchend tracken die Bewegung des Fingers auf dem Touchscreen.

const  startmove = document.querySelector('.startmove');
const  moves = document.getElementById('moves');
let  startx = 0;
let  starty = 0;
let  dist = 0;

startmove ist das HTML-Element, auf dem die Bewegung des Fingers beginnt. moves ist nur ein Element zur Ausgabe der Statusmeldungen.

Um die Bewegung des Fingers auf dem Touchscreen zu verfolgen, werden drei Event-Listener gebraucht: touchstart, touchmove und touchend.

startmove.addEventListener('touchstart', function(eve){
	const  touchobj = eve.changedTouches[0]; // erster Finger
	startx = parseInt(touchobj.clientX); // X/Y-Koordinaten relativ zum Viewport
	starty = parseInt(touchobj.clientY);
	moves.innerHTML = 'touchstart bei ClientX: ' + startx + 'px ClientY: ' + starty + "px";
	eve.preventDefault();
});

eve.changedTouches[0] liefert die Informationen zum Finger und seiner Position am Anfang der Bewegung.

startmove.addEventListener('touchmove', function(eve){
	const  touchobj = eve.changedTouches[0]; // erster Finger
	const  distx = parseInt(touchobj.clientX) - startx;
	const  disty = parseInt(touchobj.clientY) - starty;
	moves.innerHTML = 'touchmove horizontal: ' + distx + 'px vertikal: ' + disty + 'px'; 
	eve.preventDefault();
});

startmove.addEventListener('touchend', function(eve){
	const touchobj = eve.changedTouches[0]; // reference first touch point for this event
	moves.innerHTML = 'touchend bei X-Koordinate: ' + touchobj.clientX + 'px Y-Koordinate: ' + touchobj.clientY + 'px';
	eve.preventDefault();
});

jQuery hingegen bietet ein fertiges Swipe.

$("#box").on("swipe",function(){
  $(this).hide();
});

jQuery mobile Swipe

Swipe mit oder ohne jQuery: HAMMER.JS war eine kleine Library (7.34 kB minified + gzipped), die Touch-Gesten unterstützt und darüber hinaus die kleine Verzögerung von 300ms bei Klicks eliminierte (die es heute so nicht mehr gibt). HAMMER.JS entdeckt rotate, pinch, pres, pan, tap und swipe-Gesten, aber das letzte Update für hammer.js war 2016.

Swipe ohne jQuery

Für eine Galerie mit Swipe gibt es ein feines gut gepflegtes Script von lyfeyaj auf github: swipe.

Script von Github einbinden

swipe.min.js von swipe/build einbinden, rd. 8KB

Alternativer Ansatz

Ein input type="range"-Element dazu, das mit jedem Schritt ein Bild / Element weiter scrollt. Scrollen per CSS transformX.