jquery.touch.js

This file contains functions that handle all touch, pointer and click events and trigger unified touch events.

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_");