How to handle phonegap touch events

If you are working on Phonegap, you will notice that most of the touch events (like doubletap, longtap, swipe, swipeleft, swiperight, swipeup and swipedown etc.) donot work in phonegap. The only touch event that worked for me was a click event i.e

document.addEventListener("click", function(){
 alert('Click Event!');
});

After some research and checking out different JQuery plugins like (quojs, although it did not work for me) I was able to solve the issue by using Jquery plugins like:

1. jGestures (Download Here)
2. Touchable (Download Here)

Both plugins are effective and very easy to use. With touchable plugin you can handle the following events:

1. touchablemove
2. touchableend
3. tap
4. longTap
5. doubleTap
6. hover

Swipe events are not supported in touchable plugin. For swipe events you can try jGestures. jGestures supports a lot of touch events like:

1. swipeup
2. swiperight
3. swipedown
4. swipeleft
5. swiperightup
6. swiperightdown
7. swipeleftdown
8. swipeleftup
9. swipemove
10. tapone

and many more.

How to use jGestures for touch events handling?

jGestures can be easily used to handle touch events in phonegap. Include JQuery in your phonegap project before including the jgestures.js file. Once you have included the files, you can easily bind a call back function to a single event or multiple events i.e

jQuery('#main').bind('swipeleft swiperight',triggerSwipe); 

function triggerSwipe(){
 alert('Event triggered!');
}

In the above code two events (swipeleft,swiperight) are bind to the div (main) and triggers (triggerSwipe) function when an event occurs. If you swipeleft or swiperight on your mobile phone screen, you will see an alert on the screen.

How to use Touchable for touch events handling?

Just like jGesture, Touchable is also very easy to use and you can invoke a callback function on a touch event.

var div = $('#main').Touchable();
div.bind('tap', function(e, tap){
 alert('Event triggered!');
})

The above code makes the (main) div touchable and binds tap event to the div. When someone taps on the main div tap function is triggered to show an alert message.

Related Posts
Develop mobile applications in your favourite web technologies using phonegap
How to build android APK file of your phonegap project?