jQueryTouch

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.