Detecting iPhone Swipe with jQuery

Question

I'm simply looking for a listener that will detect the swipe of a finger on a touch device.

For example;

 if (swipe.direction == 'left' ) {
     function();
 }

Solution 1

With jQueryMobile you can use several events, such as swipe, or even swipeleft, swiperight, tap, etc.

http://jquerymobile.com/test/docs/api/events.html

Solution 2

You can use this jquery plugin

http://www.netcu.de/jquery-touchwipe-iphone-ipad-library

Solution 3

A much nicer plugin for handling swipes ( if that's all you want ) is Touch Swipe.

I found the touchwipe to be pretty rubbish, and I always find jQueryMobile way to heavy when all you want is this functionality.

https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

Comments

[Antonio Moore]

I tried using that but it started adding DIV elements to my page. I found another little plugin that I modified to work with watewrwheel carousel.

[Janak Nirmal]

Than you should post your answer detailing about that plugin and accept that so that other members can have benefit of your research. Well of course if you don't mind posting answer, please consider this as request.

[Heath]

Great little script! Although it's written a little strangely I very much prefer this to jQuery Mobile, since jQuery Mobile provides a ton of bloat and modifies the DOM automatically, even if you don't want it to.

[Trip]

The swipe method in jQueryMobile does not return a swipe direction. In fact, I don't believe it can register and up/down swipe either.

[Edmund Sulzanok]

Works nice on PC, but I think it overrides .on("click") event on iPhone :(

[Vasanthan.R.P]

Even it is an Iphone related question and the answer is perfect for Iphone just to let people know that it is not working on Android Tabs

[Alex McManns]

Is it compatible with scroll?? In my case, if I set this events, loosing scrolling on touchscreen device like iPad!