jQuery Finger

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 drag and pinch. 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 jQuery Finger events like this:


// 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:

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.