jquery.touch.js

Demo page

Usage

Use the following code to initalize touch on a jQuery object.

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

Options

Options can be passed via an optional argument.

$("#touch-target").touchInit({
    preventDefault: true,
    mouse: true,
    pen: true,
    maxtouch: -1,
    prefix: ""
});

Name	Type	Default	Description
preventDefault	boolean	true	prevent default click/touch handlers
mouse	boolean	true	Whether unified touch event should be triggered from mouse events.
pen	boolean	true	Whether unified touch event should be triggered from pen input.
maxtouch	number	-1	The maximum number of simultaneous points to handle and to trigger event. A negative number means unlimited.
prefix	string	''	Add prefix to the triggering touch event name. It is useful when you want to add handlers with different options. If you pass my_ as prefix, the event name touch_start will become my_touch_start. The same applies to touch_move and touch_end.

---

Events

Three kinds of unified touch events will be triggered in response to native click/touch/pointer events. Use the following code to handle these events

$("#touch-target").on("touch_start", function(event) {
	// your handler function
});

The event name can be modified using the prefix option. There is the description of all the events.

Default name	Description
touch_start	Triggered when a new touch point starts on the target jQuery object.
touch_move	Triggered when a touch point moves. The event will still trigger even if the touch point moves out of the target jQuery object.
touch_end	Triggered when a touch point ends or is cancelled.

---

The event object

An event object will be passed into your handler function. Here is a table of the properties of the event object that is important for handling the event.

Property name	Type	Description
type	string	It is the type of the current event.
originalType	string	It is the type of the native event triggering the current event.
clientX clientY pageX pageY screenX screenY	number	These are the coordinates of the current touch point triggering the current event. These are the same as those in the native event object.
touches	array	It is an array containing all the touches started from the target element and not ended yet. See the table below for properties of the unified touch object.

---

The touch object

Property name	Type	Description
id	number	It is the id of the touch given from the native touch/pointer event. It will be 0 if the event is triggered from native mouse event.
clientX clientY pageX pageY screenX screenY	number	These are the coordinates of the touch object. These are the same as those in the native event object.

---

Dispose

If you are finished with handling unified touch events with the jQuery object. Use the following code to dispose.

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

If you used a prefix in touchInit(), you need to pass the same prefix in touchDispose().

$("#touch-target").touchDispose("my_");