how to handle touch events in IOS/Android

Question

I am working on a web application. As per the requirement i need to create scrolling images effect when user swipe and on touch (or click) i need to move the specific image to some predefined destination.

So some stack of images has two events, on touch move it should scroll left or right and on touch start(click) it should move to some distance.

I am unable to handle both events, i want to fire only touch-move event when user swipe and want touch-start to fire when user touch or click.

But on swiping, touch start event is also firing up. Please advice me the solution.

Even i have tried click event instead of touch start but still i have same issue.

Answer 1

您可以在http://developer.yahoo.com/yui/3/scrollview/上查看YUI 3的Scrollview小部件，此外，YUI 3.2还添加了触摸支持。

Answer 2

If you're able to swap out Jquery for something a little smaller and a little more mobile-friendly, Zepto provides a pretty decent alternative. It's not a drop-in replacement for everything Jquery, but it is surprisingly compatible. It provides basic touch events and CSS animations to make modern web development possible on iOS.

If you're looking for a more complete mobile framework, Spine.js and Spine.Mobile.js sit on top of either Jquery or Zepto, and works very nicely for creating single-page-apps using modern JS development techniques.

IScroll4 also does a nice job of hiding the pain of touch events, and makes things like static headers and footers possible, even in older versions of iOS and Android.

UPDATE

jqTouchPunch is a bit of a hack, but works surpisingly well...

Answer 3

Take a look at jQuery Mobile . Although it is in Alpha stage right now they are planning to release the first version in spring 2011.

jQuery Mobile: Touch-Optimized Web Framework for Smartphones & Tablets

A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design

Touch-optimized layouts & UI widgets

Our aim is to provide tools to build dynamic touch interfaces that will adapt gracefully to a range of device form factors. The system will include both layouts (lists, detail panes, overlays) and a rich set of form controls and UI widgets (toggles, sliders, tabs)

Demos are here .