CODEWITHSUNDEEP
javascriptwebkittouch
Purpletoucan
Purpletoucan

Reputation: 6572

Javascript Touch Object

I am trying to differentiate a click from a swipe in Javascript using touch events. I would like to know, is there a property in the touch event object that can be inspected to determine the difference on a 'touchend' event, or do you have to listen for both a touchstart or touchend AND a touchmove event? I am trying to minimise the number of event listeners I have to add to the DOM and am wondering if it is possible to do this by observing a single event? Specifically I am looking at webkit on iOS.

Upvotes: 0

Views: 1359

Answers (1)

Geuis
Geuis

Reputation: 42277

Don't bind to the click event at all. It responds much slower than the collection of touch events.

To check for a swipe, you need to listen for the touchstart and touchend events. Don't worry about touchmove unless you're planning on doing something when that event fires.

On the touchstart event, you will need to record the x/y position of the event. On the touchend event, do the same again. What you'll also need is some kind of threshold value, so that when you calculate the difference between x1-x2 and y1-y2 you can determine if it was a swipe or not.

Apple gives a meta-algorithm that involves touchmove here http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html. Search on that page for "identify a swipe" and you'll find it.

I personally have never needed to use touchmove and successfully have used the technique I described above. However, either is a valid approach so you should investigate what works best for you.

Upvotes: 2

Related Questions