CODEWITHSUNDEEP
javascriptjqueryhammer.js
Benoit Letourneau
Benoit Letourneau

Reputation: 200

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

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.

Upvotes: 5

Views: 14782

Answers (4)

Reggie Pinkham
Reggie Pinkham

Reputation: 12718

While there's probably nothing wrong with the accepted answer, I personally had to edit it a little to get it working. Because this all took longer to discover than it should have I'll provide my working solution. But kudos to Josh Unger.

var hammer = new Hammer(document);

var singleTap = new Hammer.Tap({ event: "tap" });
var doubleTap = new Hammer.Tap({ event: "doubletap", taps: 2 });

hammer.add([doubleTap, singleTap]);

singleTap.requireFailure(doubleTap);
doubleTap.recognizeWith(singleTap);

hammer.on("tap", function(e) {console.log("tap");});
hammer.on("doubletap", function(e) {console.log("doubletap");});

Upvotes: 1

Josh Unger
Josh Unger

Reputation: 7163

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/

Upvotes: 14

Stephan Terning
Stephan Terning

Reputation: 1

I'm using jQuery 2.1.0 and Hammer 1.0.10 and Chris's answer almost work but it fires logs tap after logging double tap. I've added a timeout also to the reset of doubleTap back to false and it seems to work out for me.

var doubleTapped = false;
Hammer(document.getElementById("W0AM")).on('doubletap', function (event) {
    doubleTapped = true;

    console.log( 'this was a double tap' );
}).on('tap', function (event) {
    setTimeout(function() {
       if(!doubleTapped) {
          console.log( 'this was a single tap' );
       }

       setTimeout(function() {
           doubleTapped = false;
       }, 500);

    }, 500); // This may have to be higher dependant on the speed of the double tap...
});

Upvotes: 0

Chris Dixon
Chris Dixon

Reputation: 9167

My guess is that the alert is preventing doubletap from being triggered in the first code block... it's kinda messy but you could try something like:

var doubleTapped = false;
$("#W0AM").hammer();
$("#W0AM").on('doubletap', function (event) {
    doubleTapped = true;

    console.log( 'this was a double tap' );
}).on('tap', function (event) {
    setTimeout(function() {
       if(!doubleTapped) {
          console.log( 'this was a single tap' );
       }

       doubleTapped = false;
    }, 500); // This may have to be higher dependant on the speed of the double tap...
});

Upvotes: 0

Related Questions