Mike Schultz edited this page Aug 12, 2016 · 57 revisions

Javascript libraries for dealing with touch events, multitouch, normalizing across the Webkit/IE touch models, and all that jazz.

Touch Event Libraries

Dojo

  • dojo/touch - Dojo detection functions for touch events

jQuery

  • jquery.doubletap - Custom touch events for jQuery. Demo.
  • Touchy - Highly configurable jQuery plugin. Exposes event data (velocity, etc) for longpress, drag, pinch, rotate, swipe. Example use cases: prevent conflict between drag and swipe; get pinch abstracted across Android and iOS; create a single finger rotation.
  • jQuery UI Interactions - Rewrite of the existing jQuery UI interactions, now with mouse, touche and pointer (aka MSPointer) support. Work in progress, but draggable already works great for all three event APIs.
  • jquery-ui-touch-punch - A duck punch for adding touch events to jQuery UI
  • pep.jquery.js - A lightweight plugin for kinetic-drag on mobile & desktop
  • jQuery.event.move - jQuery special events movestart, move and moveend for tracking touch and mouse moves, throttled to browser animation frames, and exposing information about distance and velocity of fingers. Demo at stephband.info/jquery.event.move/.
  • jQuery.event.swipe - jQuery special events for the gestures swipeleft, swiperight, swipeup and swipedown, built on top of jQuery.event.move. Demo at stephband.info/jquery.event.swipe/.
  • jQuery Mobile vmouse - from the jQuery Mobile team. Supports normalized handling of mouse and touch events under one event convention: vclick, vmousedown, vmouseup, vmousemove, etc.
  • Touchable - Unifies touch and mouse events
  • http://jgestures.codeplex.com/
  • http://labs.skinkers.com/touchSwipe/
  • TipTap: normalizes mouse and touch events, and provides simple definition of complex gestures (any combination of tap, swipe, etc.) with simple callbacks.
  • jQuery Touch Gestures: Touch Gestures ported and fixed from QUOjs project. Available gestures: singleTap | doubleTap | hold | swipe | swiping | swipeLeft | swipeRight | swipeUp | swipeDown | rotate | rotating | rotateLeft | rotateRight | pinch | pinching | pinchIn | pinchOut | drag | dragLeft | dragRight | dragUp | dragDown

MooTools

  • mootools-mobile - Wraps click handlers with touch and provides some custom events.

YUI

Zepto

Other

  • Event.js - Multi-touch events library, and abstractions.
  • pointer.js - a pointer event polyfill.
  • jsTouchLayer - A javascript based touch events library, agnostic of any javascript libraries. Missing pinch/spread atm.
  • interact - abstracted mouse and touch events into generic pointer events. Uses eve under the hood.
  • tap.js - A lightweight 'tap' event JavaScript plugin for mobile browsers (no dependencies)
  • tappable - A simple, standalone library to invoke the tap event for touch-friendly web browsers.
  • Touchy - Lightweight (no dependencies) multi-touch, models individual fingers
  • Touch - Simple library, enables touch events, such as: swipe, pinch and tap.
  • thumbsjs - from the PhoneGap team. Heavily tested on many devices. Mature.
  • touch-layer - Custom events and gestures handler for touch enable mobile devices.
  • WKTouch - Hardware accelerated multi-touch drag, scale and rotate plugin for Mobile Webkit.
  • MagicTouch.js - Standards-compatible touch event polyfill to map trackpad touches to touch events. Uses NPAPI plugin.
  • Hammer.js - Lightweight library for multi-touch gestures

Gestures

  • Hammer.js - A javascript library (only 2kb) for multi-touch gestures: Tap, Drag, Pinch, Hold
  • Ember-Touch - A lightweight library for building and using touch gestures with Ember Applications.
  • Jester - Easy JavaScript gesture recognition for iPhone and iPad.
  • Mobile-Web-based-Gesture-Recognition - Based on Dollar. Demo.
  • shake.js - A custom 'shake' event plugin for mobile web browsers using device accelerometer. (Okay, not strictly touch, but it does require you to use your hand :P)
  • dojox/gesture - Dojo detection functions for gesture events
  • ZingTouch - Gesture detection library written in ES6. Comes with default gestures, but has the ability to extend and create new ones.

Scrolling

Speeding Up Click Events

Debugging

Touch Specific Components

  • Swipe JS - carousel (aka slider) component that is touch friendly
  • Swiper - mobile touch slider with hardware accelerated transitions
  • jQuery Mobile Pagination - touch-drag pagination between separate HTML documents or jQuery Mobile "pages"
  • wkslider - A touch–optimised UI range slider JavaScript plugin (no dependencies)

Multimedia (videos, tutorials, etc.)

Videos

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.