Looking for tools to assist with smart phone web development, I came across jGestures at jgestures.codeplex.com. It's a handy little tool that allows you to register all kinds of touch events for supported devices. It uses jQuery's awesome event-handling functions. Unfortunately it seems that Android doesn't register multi-touch events correctly, so it can really only do single-touch swipe gestures and dragging. (I haven't tried an ICS device, so if you have one, please let me know the results in the comments)
You can play with it using the link below if you have a device that supports gestures. Tap with one finger to clear the event list, otherwise it will display the last several. There are a few downsides here. Sometimes an event can be registered as rotation, pinching, and swiping all at the same time, and so all those events will fire. There are some settings you can manipulate to make it less sensitive though. Also, if you know exactly what type of event you're looking for, you can simply register that and ignore the others. Also, the swipe events always seem to fire several times.
Thanks to the jQuery backend, binding the events is as easy as $('#gesture').bind('eventname', callback);. The events are pinch, rotate, swipemove, swipeone, swipetwo, swipethree, swipefour, orientationchange, swipeup, swiperightup, swiperight, swiperightdown, swipedown, swipeleftdown, swipeleft, swipeleftup, tapone, taptwo, tapthree, pinchopen, pinchclose, rotatecw, and rotateccw. Something like element.bind('swipemove', function(){event.preventDefault();}); may be useful to prevent dragging the page around. See the documentation for more information.
If you need to know which out the few actions was actually performed, it may work to collect all the events that fire together using some sort of timeout and determine which one is the most relevant based on the information provided by the event. I've only tested this on a few devices, so please share your results in the comments below. Also let us know if you know of another tool to handle touch events.
About Matcha Design
Matcha Design is a full-service creative agency specializing in web design, print, identity, branding, interface design, video production, still photography and motion design. Using our passion for excellence, multi-cultural background, and award winning practices, we consistently provide high-quality, custom, innovative solutions to meet the diverse marketing needs of our clients. For more information, visit www.MatchaDesign.com.
Comments (0)
Post has no comments.