:v: jQuery touch & gestures, fingers in the nose.
⚠️Not maintained anymore ⚠️
If you only seek to eliminate the 300ms tap delay, please first consider using native solutions as nearly all modern browsers now support one of them.
jQuery tap & gestures, fingers in the nose.
Finger unifies click and touch events by removing the 300ms delay on touch devices. It also provides a common
set of events to handle basic gestures such as flick, drag, press and double tap.
Very small (< 0.5kb gzipped), it is focused on performance and KISS, is well tested and also supports jQuery delegated events.
Download the production version or the development version.
You can also install it via Jam or Bower.
In your web page:
Finger focuses on one finger events:
| tap | doubletap | press | drag | flick |
----------|-----|-----------|-------|------|-------| Available | ✔ | ✔ | ✔ | ✔ | ✔ |
You can tweak how Finger handles events by modifying thresholds found in the
$.Fingerobject.
pressDuration
This is the time the user will have to hold in order to fire a
pressevent. If this time is not reached, a
tapevent will be fired instead. This defaults to
300ms.
doubleTapInterval
This is the maximum time between two
tapevents to fire a
doubletapevent. If this time is reached, two distinct
tapevents will be fired instead. This defaults to
300ms.
flickDuration
This is the maximum time the user will have to swipe in order to fire a
flickevent. If this time is reached, only
dragevents will continue to be fired. This defaults to
150ms.
motionThreshold
This is the number of pixel the user will have to move in order to fire motion events (drag or flick). If this time is not reached, no motion will be handled and
tap,
doubletapor
pressevent will be fired. This defaults to
5px.
Finger enhances the default event object when there is motion (drag & flick). It gives information about the pointer position and motion: - x: the
xpage coordinate. - y: the
ypage coordinate. - dx: this
xdelta (amount of pixels moved) since the last event. - dy: this
ydelta since the last event. - adx: this
xabsolute delta since the last event. - ady: this
yabsolute delta since the last event. - orientation: -
horizontal: motion was detected as an horizontal one. This can be tweaked with
$.Finger.motionThreshold. -
vertical: motion was detected as a vertical one. This can be tweaked with
$.Finger.motionThreshold. - direction: -
1: motion has a positive direction, either left to right for horizontal, or top to bottom for vertical. -
-1: motion has a negative direction, either right to left for horizontal, or bottom to top for vertical. - end:
trueif motion has stopped, else
false.
There are three ways of preventing default behavior.
You can prevent every native behavior globally:
javascript $.Finger.preventDefault = true;
You can prevent default behavior, just like any other standard events:
javascript $('body').on('tap', '.touchme', function(e) { // ... e.preventDefault(); });
Note that if you bind multiple events of the same type on the same element, and one of them is preventing default, every trigger of that event will implicitly prevent default of other bound events.
press event can only be prevented globally, not specifically.
Internally Finger binds a global
touch/
mouseevent to do its duty. This native event can be accessed via the
e.originalEventproperty. This is a shared event, that means that this will be the same object across all your handlers.
With this original event you are able to decide how you want to prevent default behavior by adding any logic in any of your handlers.
This is an example on how to prevent horizontal scrolling, but not vertical: ```javascript $('body').on('drag', '.drag', function(e) { // let the default vertical scrolling happen if ('vertical' == e.orientation) return;
// prevent default horizontal scrolling e.preventDefault();
}); ```
This is how Finger prevents default behavior:
| tap | doubletap | press | drag | flick | globally |
------------------------|-----|-----------|-------|------|-------|----------| touchstart / mousedown | | | | | | ✔ | touchmove / mousemove | | | | ✔ | ✔ | | touchend / mouseup | ✔ | ✔ | | ✔ | ✔ | |
More details.
$('body').on('tap', 'a', function(e) { window.location = $(this).attr('href'); e.preventDefault(); });
$('body').on('tap', '.toggle', function() { $(this).toggleClass('is-selected'); });
$('#menu').on('flick', function(e) { if ('horizontal' == e.orientation) { if (1 == e.direction) { $(this).addClass('is-opened'); } else { $(this).removeClass('is-opened'); } } });
preventDefaultdoes not work as expected because
ontouchstartis defined. To make it work, you have to manually prevent the default behavior in the
mousedownor
clickevent.
flickor
dragevent on an image, you have to set
user-drag: noneon it (and the prefixed versions).
v0.1.6 - improve press event handling (#49).v0.1.5
v0.1.4
v0.1.3
v0.1.2
v0.1.1
preventDefault
on desktop browsers for tap
and doubletap
events (#24).v0.1.0
v0.1.0-beta.2
v0.1.0-beta.1 (buggy)
v0.1.0-beta (buggy)
v0.1.0-alpha.1
v0.1.0-alpha
v0.0.11
press
event is now fired by timeout
instead of touchend
.v0.0.10
preventDefault
support.v0.0.9
v0.0.8
v0.0.7
v0.0.6
v0.0.5
v0.0.4
drag
and flick
gestures.event
object.v0.0.3
v0.0.2
doubletap
and press
gestures.v0.0.1
tap
gesture first implementation.
| |
|---|
| Nicolas Gryman |