Javascript IPhone / IPad – Touch und Scroll Funktion

Gepostet am April 30, 2012

Im folgenden möchte ich zeigen, wie man das Scrollen mit Touchgeräten steuert bzw. auslesen kann.
Grundsätzlich gibt es drei Events, welche von Bedeutung sind:
1. touchstart – wird ausgelöst, sobald man das Touchpad berührt
2. touchmove – wird während dem ziehen ausgelöst
3. touchend – wird nach dem loslassen ausgelöst

Um Elemente nach den Koordinaten verändern zu können, liest man die Position beim „touchstart“ und währende des Bewegens (touchmove) bzw. touchend aus berechnet die Strecke. Folgend ein Beispiel:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var startPosY;
var startPosX;
document.addEventListener("touchstart", touchstartHandler, false);
document.addEventListener("touchmove", touchmoveHandler, false);
document.addEventListener("touchend", touchmoveHandler, false);
function touchstartHandler(e) {
    startPosY = e.touches[0].pageY;
	startPosX = e.touches[0].pageX;
}
function touchmoveHandler(e) {
    var touch = e.touches[0];
    //var targetBox = e.currentTarget.getElementsByTagName("div")[0];
    e.preventDefault();
 
    var fingerMovedY = startPosY - touch.pageY;
	var fingerMovedX = startPosX - touch.pageX;
    startPosY = touch.pageY;
	startPosX = touch.pageX;
 
   alert(fingerMovedY);
   alert(fingerMovedX);
}

Tags: , , , , ,

Leave a Reply

 

Posts of Current Category



Facebook: