Tutorial: Wischen-Funktion (Swipe) mit JavaScript

➔ Click here for the English version
Dieses Tutorial erklärt, wie man mit JavaScript eine einfache Wischen-Funktion (Swipe) mit einer bestimmten minimalen Wischen-Länge und einem wischbaren Bereich als Voraussetzungen kreiert

Wenn Ihre Website auf mobilen Endgeräten eleganter sein soll, könnte Ihnen die folgende Wischen-Funktion in JavaScript helfen, das zu realisieren. Am Ende des Artikels befindet sich der komplette Code.

Breite des Fensters ermitteln und wischbaren Bereich festlegen

In den meisten Fällen möchten Sie, dass weder die Kopf-, noch die Fußzeile Ihrer Website wischbar sind. Deshalb setzen wir den wischbaren Bereich als erstes auf unseren HTML main-Tag fest. Außerdem ermitteln wir die Breite des Fensters und legen die minimale Länge für ein Wischen abhängig von der Fensterbreite fest, während wir eine zu große Länge mit einer maximalen Länge verhindern:

var SwipeArea = document.querySelector("main");
var SwipeWidth = ((window.innerWidth)/2);
var SwipeWidthMax = 320;
	
if (SwipeWidth > SwipeWidthMax) {
	SwipeWidth = SwipeWidthMax;
}

Natürlich können Sie einen anderen Bereich zum Wischen festlegen und die Länge für das Wischen auf einen Wert festlegen, der Ihnen passt.

EventListener für das Wischen hinzufügen und Variablen festlegen

Für unsere einfache Funktion brauchen wir EventListeners für den Start und das Ende unseres Wischens:

SwipeArea.addEventListener("touchstart", SwipeStart, false);
SwipeArea.addEventListener("touchend", SwipeEnd, false);

Darüber hinaus müssen wir die grundlegenden Variablen festlegen:

var SwipeStartX = null;
var SwipeEndX = null;
var SwipeLengthX = null;
	
var SwipeStartY = null;
var SwipeEndY = null;
var SwipeLengthY = null;

Aufrufen der Wischen-Funktion

Am Ende müssen wir die Wischen-Funktion bei jedem Start und Ende jedes Wischens aufrufen und dabei deren exakte Positionen bestimmen, um die Länge des Wischens zu berechnen. Wenn das Wischen in x-Richtung länger ist als in y-Richtung, können wir fortfahren und die Länge des Wischens mit unserer minimalen Wischen-Länge vergleichen:

function SwipeStart(evt) {                                         
	SwipeStartX = evt.changedTouches[0].clientX;
	SwipeStartY = evt.changedTouches[0].clientY;
};

function SwipeEnd(evt) {
	SwipeEndX = evt.changedTouches[0].clientX;
	SwipeEndY = evt.changedTouches[0].clientY;
		
	SwipeLengthX = SwipeStartX - SwipeEndX;
	SwipeLengthY = SwipeStartY - SwipeEndY;
		
	if (Math.abs(SwipeLengthX) > Math.abs(SwipeLengthY)) {
		if (SwipeLengthX > SwipeWidth) {
			/* left swipe */
		}
		else if (SwipeLengthX < -SwipeWidth) {
			/* right swipe */
		}
	}
};

Nun können Sie Ihre bevorzugte Aktion für ein Wischen nach rechts oder links festlegen.

Kompletter Code

var SwipeArea = document.querySelector("main");
var SwipeWidth = ((window.innerWidth)/2);
var SwipeWidthMax = 320;
	
if (SwipeWidth > SwipeWidthMax) {
	SwipeWidth = SwipeWidthMax;
}

var SwipeStartX = null;
var SwipeEndX = null;
var SwipeLengthX = null;
	
var SwipeStartY = null;
var SwipeEndY = null;
var SwipeLengthY = null;

SwipeArea.addEventListener("touchstart", SwipeStart, false);
SwipeArea.addEventListener("touchend", SwipeEnd, false);

function SwipeStart(evt) {                                         
	SwipeStartX = evt.changedTouches[0].clientX;
	SwipeStartY = evt.changedTouches[0].clientY;
};

function SwipeEnd(evt) {
	SwipeEndX = evt.changedTouches[0].clientX;
	SwipeEndY = evt.changedTouches[0].clientY;
		
	SwipeLengthX = SwipeStartX - SwipeEndX;
	SwipeLengthY = SwipeStartY - SwipeEndY;
		
	if (Math.abs(SwipeLengthX) > Math.abs(SwipeLengthY)) {
		if (SwipeLengthX > SwipeWidth) {
			/* left swipe */
		}
		else if (SwipeLengthX < -SwipeWidth) {
			/* right swipe */
		}
	}
};

Questions?

Wenn Sie weitere Fragen haben, können Sie mir gerne eine E-Mail an ed.nnamttug-ppilihp@liam schreiben und ich versuche zu helfen :)