View on GitHub

jQueryTouch

A set of jQuery plugins for unifying mouse/touch events across different browsers.

A Simplified Way To Handle Input.

Add jQueryTouch to your project and forget about implementing handlers for all different browsers.

The first jQuery plugin that handles both iOS touch events and IE10 pointer events.


Getting Started

Download jQueryTouch

Depends on your need, you can download minified scripts or go to the project page to download a development version of the scripts.


Adding jQueryTouch to your project

Simply add the following code to pages that need to handle touch.

<script type="text/javascript" src="jquery.touch.js"></script>

There are totally 4 script files in jQueryTouch. You can add them depending on your need.

File Description
jquery.touch.js This file contains functions that handle all touch, pointer and click events and trigger unified touch events.
jquery.gesture.js Handles unified touch events and will trigger unified gesture events based on two unified touch points.
Requires jquery.touch.js on the same page.
jquery.gesture2.js Handles unified gesture events and will transform(move/scale/rotate) jQuery objects.
Requires jquery.touch.js and jquery.gesture.js on the same page.
jquery.swipe.js Handles unified touch events and will trigger swipe events.
Requires jquery.touch.js on the same page.

Click on the file names to see the documentation of the API of the files.


Using jQueryTouch

Before unified touch events are triggered, you need to call the .touchInit() function like the following.

$("#touch-target").touchInit();

Then you need to add unified touch event handlers.

var handler = function (event) {
    // your handler logic goes here
};
$("#touch-target").on("touch_start", handler);
$("#touch-target").on("touch_move", handler);
$("#touch-target").on("touch_end", handler);

You may want to have different handlers for different events.

var start_handler = function (event) {
    // your handler logic goes here
};
var move_handler = function (event) {
    // your handler logic goes here
};
var end_handler = function (event) {
    // your handler logic goes here
};
$("#touch-target").on("touch_start", start_handler);
$("#touch-target").on("touch_move", move_handler);
$("#touch-target").on("touch_end", end_handler);

Go to the documentation of jquery.touch.js to see what properties the event object has.


Browser support

Browser Touch/
Pointer
jquery.
touch.js*
jquery.
gesture2.js
Internet Explorer 8 No Yes No
Internet Explorer 9 No Yes Yes
Internet Explorer 10 Pointer Yes Yes
Firefox 4+ No Yes Yes
Chrome No Yes Yes
Chrome 22 beta Touch Yes Yes
Safari 3.1+ No Yes Yes
Opera 10.5+ No Yes Yes
Safari on iOS 3.2+ Touch Yes Yes
Android default browser Touch Partial** Partial**
Chrome for Android Touch Yes Yes
Firefox for Android Touch Yes Yes
Opera Mobile 11+ Touch Yes Yes

* jquery.touch.js is supported means jquery.gesture.js and jquery.swipe.js are also supported on that browser.

** Defalt browser on Android may behave differently on different devices. Some devices support multi-touch but will not pass more than 1 touch to the browser.

*** Browsers not in the above table may work but are untested. Browsers in the above table but without version specified mean latest version only.