jQuery 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 press, double tap and drag. Very small (< 0.5kb gzipped), it is focused on performance, is well tested and also supports jQuery delegated events.
Getting started
You can give it a shot by adding the script right after jQuery:
<script src="//rawgit.com/ngryman/jquery.finger/v0.1.2/dist/jquery.finger.js"></script>
Then you can subscribe to any of the
// direct event
$('.touch').on('tap', function(e) {
console.log(this, e);
});
// delegated event
$('.parent').on('tap', '.touch', function(e) {
console.log(this, e);
});
Events
jQuery Finger focuses on one finger events. You can use the provided events like any other jQuery event.
Direct and delegated events are both supported. This can be very useful for dynamically loaded content via AJAX for example.
Tap
The tap event is the most basic one and is essentially like a click. On touch devices, it removes the 300ms delay of the standard click.
It won't be triggered if the pointer has moved above a specific threshold (see Thresholds).
// direct event
$('.touch').on('tap', function(e) {
console.log(this, e);
});
// delegated event
$('.parent').on('tap', '.touch', function(e) {
console.log(this, e);
});
Double tap
The double tap event is triggered when the user tap twice in a short amount of time.
It will only be triggered if the time elapsed between the two taps are under a specific threshold (see Thresholds).
// direct event
$('.touch').on('doubletap', function(e) {
console.log(this, e);
});
// delegated event
$('.parent').on('doubletap', '.touch', function(e) {
console.log(this, e);
});
Press
The press event (aka long tap or tap hold) is triggered when the user keeps the finger among a certain amount of time.
It will only be triggered if the time elapsed is under a specific threshold (see Thresholds).
// direct event
$('.touch').on('press', function(e) {
console.log(this, e);
});
// delegated event
$('.parent').on('press', '.touch', function(e) {
console.log(this, e);
});
Flick
The flick event (aka swipe) is triggered when the user swipes rapidly the finger in one direction.
It will only be triggered if the time elapsed is under a specific threshold (see Thresholds).
// direct event
$('.touch').on('flick', function(e) {
console.log(this, e);
});
// delegated event
$('.parent').on('flick', '.touch', function(e) {
console.log(this, e);
});
Drag
The drag event is triggered when the user move its finger in one direction.
It will only be triggered if the time elapsed is above a specific threshold (see Thresholds).
// direct event
$('.touch').on('drag', function(e) {
console.log(this, e);
});
// delegated event
$('.parent').on('drag', '.touch', function(e) {
console.log(this, e);
});
Events parameters
jQuery Finger enhances the default event object when there is motion (drag & flick). It gives information about the pointer position and motion:
- x: the x page coordinate.
- y: the y page coordinate.
- dx: this x delta (amount of pixels moved) since the last event.
- dy: this y delta since the last event.
- adx: this x absolute delta since the last event.
- ady: this y absolute 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.
Thresholds
You can tweak how jQuery Finger handle events by modifying thresholds found in the $.Finger object.
$.Finger = {
pressDuration: 300,
doubleTapInterval: 300,
flickDuration: 150,
motionThreshold: 5
};
For more information, visit the Github repository.