Hammer.js : How to handle / set tap and doubletap on same elements

Question

I'm using jquery.hammer.js, it works quite well and I am able to bind function to a doubletap event. That is working fine.

What I want is to bind two different behaviors. One for the "tap", one for the "doubletap". I use the code below to bind my functions. When I do that, I only get the "tap", the "doubletap" doesn't seem to be triggered.

$("#W0AM").hammer();
$("#W0AM").on('doubletap', function (event) {
    alert( 'this was a double tap' );
}).on('tap', function (event) {
    alert( 'this was a single tap' );
});

If I remove the .on('tap'... ) binding, then I get the "doubletap" as expected.

$("#W0AM").hammer();
$("#W0AM").on('doubletap', function (event) {
    alert( 'this was a double tap' );
});

If I do the following, both events get triggered all the time. I mean, I tap and I see the alert for the tap and the double tap. I doubletap, same thing, I see both alerts.

$("#W0AM").hammer();
$("#W0AM").on('tap doubletap', function (event) {
    alert( 'this was a ' + event.type );
});

The question is how can I bind both behavior and distinguish between the two in order to perform different things

Thank you.

Answer 1

Hammer.js now has a requireFailure method to recognize multiple taps.

Because multiple gestures can be recognized simultaneously and a gesture can be recognized based on the failure of other gestures. Multiple taps on the same element can be easily recognized on this way:

var hammer = new Hammer.Manager(el, {});

var singleTap = new Hammer.Tap({ event: 'singletap' });
var doubleTap = new Hammer.Tap({event: 'doubletap', taps: 2 });
var tripleTap = new Hammer.Tap({event: 'tripletap', taps: 3 });

hammer.add([tripleTap, doubleTap, singleTap]);

tripleTap.recognizeWith([doubleTap, singleTap]);
doubleTap.recognizeWith(singleTap);

doubleTap.requireFailure(tripleTap);
singleTap.requireFailure([tripleTap, doubleTap]);

When a tap gesture requires a failure to be recognized, its recognizer will wait a short period to check that the other gesture has been failed. In this case, you should not assume that its tap gesture event will be fired immediately.

SOURCE: http://hammerjs.github.io/require-failure/