How to implement two finger tap using hammer.js

Question

I am trying to implement two finger tap using hammer.js on iOS Safari but don't have any success. As I understand if both the finger touches in span of little difference even 50ms it triggers pinch gesture.

With tap event I am checking event.gesture.touches.length === 2 it satisfy my requirement but its efficiency is very low.

Can you please help me to achieve this?

Answer 1

You can try Fingers.js lib (https://github.com/paztis/fingers.js) Two fingers tap is explained in example pages. You can customize the number of fingers you want (1, 2, ..., even 11)

Answer 2

I think you have to add a tap recognizer with the parameter "pointers" set to 2. Depending on how your code is organized there's more than one way to configure it. e.g.

var hammer = new Hammer.Manager(div, {
        recognizers: [
            // RecognizerClass, [options], [recognizeWith, ...], [requireFailure, ...]
            [Hammer.Tap, { event: 'singletap2', pointers: 2 } ],
            [Hammer.Tap, { event: 'singletap' } ],
            ...

Answer 3

var myElement = document.getElementById('pad');
var mc = new Hammer.Manager(myElement);
mc.add( new Hammer.Swipe({ event: 'a', pointers: 2,direction:2}) );


mc.on("a", function(ev) {
   alert("left 2")
});

You can use the above code to know left swipe with 2 fingers.

Change pointer value to change number of fingers.

To change the swipe direction use below table.

• DIRECTION_NONE 1
• DIRECTION_LEFT 2
• DIRECTION_RIGHT 4
• DIRECTION_UP 8
• DIRECTION_DOWN 16
• DIRECTION_HORIZONTAL 6
• DIRECTION_VERTICAL 24
• DIRECTION_ALL 30