11 Multi-touch and Touch events Javascript libraries

11 Multi-touch and Touch events Javascript libraries


11 Multi-touch and Touch events Javascript libraries

Introduction

Touch screen devices are ruling the mobile platform nowadays. Most of the smart phones have it, tablet and based on the trend, it's slowly come to our desktop as well. To develop a touch screen compatible web applications or website, you can use the existing touch events of the browsers or the platforms.

There are two ways to create a touch support app - native or using the web development technologies (HTML, CSS, Javascript). It's possible to develop an app for mobile devices using web technologies, for example, we can use third party development tools such as PhoneGap to compile a web app and make it available in different web apps. Good thing about web technology is - almost all of them support the same standard. So, this time, we have collected many javascript extension and plugins that allow you to integrate touch gestures into your mobile app. We listed out events and some other useful info just to save your time.

  • QUO JS Events: Touch, Tap, Double tap, Hold, Fingers, Swipe, Swipe Up, Swipe Right, Swipe Down, Swipe Left, Drag
    Other features: Built-in jQuery-like methods. It uses $$ to avoid conflict.
    File size: 13KB minified
    Standlone: Yes
  • Hammer JS Events: Tap, Double tap, hold, drag, transform (pinch)
    Other features: Javascript library focused only for multi-touch gestures
    File size: 2KB minified
    Standlone: Yes
  • Touchy Events: long press, drag, pinch, rotate, swipe
    Other features: jQuery plugin for webkit browsers and browsers that support outch events
    File size: ~2.72KB minified
    Standlone: No, need jQuery framework
  • Mootools-mobile Events: Swipe, pinch, touch hold
    Other features: Touch events are separated into different files.
    File size: -
    Standlone: No, need MooTools
  • jQuery doubletap Events: Touch, Swipe, Tap, Double tap, Swipe left, Swipe Right, Swipe up, Swipe down
    Other features: No android support yet
    File size: 4KB
    Standlone: No, need jQuery
  • jGestures Events: Orientation change, Pinch, Rotate, Swipe move, Swipe in multi direction, Swipe with 1,2,3 fingers, Tap with 1,2,3 fingers, pinch open, pinch close, shake in different directions
    Other features: Bundled with many gestures and useful events
    File size: 16KB minified
    Standlone: No, need jQuery
  • Touch Swipe Events: Swipes in 4 directions, 1,2 fingers touch
    Other features: Allows swiping and page scrolling
    File size: 25KB
    Standlone: No, need jQuery
  • Touchable Events: Tap, Long Tap, Double tap, touchable move, touchable end
    Other features: Unifies touch and mouse events
    File size: 1.96KB
    Standlone: No, need jQuery
  • thumbs.js Events: touch start, touch end, touch end, touch move, mouse down, mouse up, mouse move
    Other features: PhoneGap and mobile web friendly
    File size: 612 bytes minified
    Standlone: Yes
  • jQuery.pep.js Events: Drag
    Other features: Uses CSS3 animations, built-in many drag features
    File size: 16KB
    Standlone: No, need jQuery
  • Jetster Events: Tap, Double tap, Swipe, Flick, Pinch, Pinch arrow, Pinch widen, Pinch end
    Other features: Jester makes recognising gestures on DOM elements really easy
    File size: 25KB
    Standlone: Yes

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

12 comments

czechian
Tue, 12th June 2012
Zepto library defines some touch gestures (tap, singletap, doubletap, longtap, swipes). http://zeptojs.com Reply
Vladimir
Tue, 12th June 2012
What's the best ? - hammer.js ? Reply
Chirag Purohit
Mon, 30th July 2012
Hi Kevin

Thanks..This is really very helpful information.This helped me a lot.Thanks again.

Regards,
Chirag Reply
Nick
Thu, 13th September 2012
TouchSwipe also binds to mouse events - so desktop users can also use swipe gestures. Reply
Bill Fisher
Tue, 25th September 2012
Touchy was primarily created not only to abstract some cross-browser differences, but also to differentiate between different types of touch gestures -- to tell the difference, for example, between a drag and a swipe. The best library really depends on the problem you are trying to solve, I think. Reply
Michael Deal
Mon, 22nd October 2012
If you're looking for a multi-touch event library that can handle anywhere from 1-12 fingers, and has been heavily tested, check out Event.js

https://github.com/mudcube/Event.js Reply
qawsed
Wed, 21st November 2012
12 fingers?? Reply
Sean
Thu, 6th December 2012
Some of us are special. Reply
ngryman
Sat, 23rd February 2013
jquery.finger also supports basic gestures and delegated jquery events which can be very usefull in a one-page application. Reply
Giancarlo Leonio
Fri, 22nd March 2013
Hi Kevin, thanks for this very helpful post! I compiled a list of some top resources on multi-touch event handling, and included your post. Check it out, feel free to share. Hope other developers find this useful too. http://www.verious.com/board/Giancarlo-Leonio/android-touch-multi-touch-event-handling/ Reply
Michael Deal
Wed, 3rd April 2013
https://github.com/mudcube/Event.js

Standalone multi-touch events library supporting anywhere from 1 to 12 fingers at a time: click, dblclick, dbltap, tap, longpress, drag, swipe, pinch, rotate, shake Reply
Patrick Mullady
Wed, 17th April 2013
I've reviewing some of the more popular libs and then found this
http://zynga.github.io/scroller/

This lib is perfect for many scenarios. Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement