Hammer.js taps are slow on Android?

Question

Situation: hammer.js 2.0.4, jQuery 2.1 on a Cordova cross-platform mobile app. I was running into well-documented (for example) issues with delay of click events, so I thought I'd try hammer.js for this. It works beautifully on my iPad, but on my Android phone (Android v4.4) is dreadful: very slow to respond, and frequently misses taps entirely.

I implemented my own small tap detection (using mouseUp events) and it performs much better than Hammer.js on my Android (but terribly on my iPad).

So my question is: are there known issues for hammer.js on Android, or known workarounds? I'd really prefer not to conditionally use two different approaches based on platform, especially when there is no conceivable way for me to test all possible mobile platforms.

Example of the hammer.js tap code; nothing very interesting going on:

    $(".menuitem").each( function(i, elem) {
      var mc = new Hammer.Manager(elem);
      mc.add(new Hammer.Tap());
      mc.on("tap", action);
    });

In addition there is a top-level swipe recognizer that covers the entire page:

    var swipelistener = new Hammer($("body")[0], {
        recognizers: [[Hammer.Swipe,{ direction: Hammer.DIRECTION_RIGHT }]]
    });
    swipelistener.on("swipe", swipeRight );

In total there will be fewer than two dozen elements responding to tap events, and no overlapping or nested elements. I thought it might have something to do with the swipe recognizer overlapping the tap recognizers, but removing the swipe listener didn't change the tap behavior at all.

Answer 1

You need to play with the settings of each recognizer.

hammertime.get('swipe').set({
    direction: hammer.DIRECTION_ALL, threshold: 1, velocity: 0.1
});

This worked for me for swipe on 4.1.1 Would be really helpful if someone could write some example code for tap as I'm still fiddling with that.

Also, you don't need mc.add as the Manager by default has all the recognizers. You only need to use .add once you've manually removed (using mc.remove) one.

If you are unsure what settings any of the recognizers have, look on their website eg http://hammerjs.github.io/recognizer-swipe/ shows that I could set direction, threshold and velocity etc as per the code above.

Answer 2

As I can see you need to detect swipe on entire screen without any specific options. Maybe cordova-android-gestures (only for Android) helps you? This plugin "catches" gestures on total device surface. So, for detect swipes:

//check the platform
if (device.platform=="Android") {
    MegaduckGestures.swiper(function(direction){
        switch (direction) {
            case 'rightSwipe': 
                //do your staff
                break;

            case 'leftSwipe': 
                //do your staff
                break;

            default: break;
        }
    });
}
else {
    //use your iPad approach
}

And for handling tap on menu item:

$(".menuitem").each( function(i, elem) {
    //check the platform
    if (device.platform=="Android") {
        MegaduckGestures.swiper(function(direction){
            if (direction=='singleTap') {
                //do your staff
            }
        });
    }
    else {
        //use your iPad approach
    }
});