All about hammer.js a start to touch gestures and multitouch

All about hammer.js a start to touch gestures and multitouch

Hammer is a open-source JavaScript Library for adding touch gestures support that can recognize gestures made by touch, mouse and pointerEvents to any website so that users can interact with them easier on touch devices. It doesn’t have any dependencies, and it’s small, only 3.71 kB minified + gzipped!

It supports tap, double tap, press, hold, drag, horizontal pan and swipe and the multi-touch pinch and rotate recognizers and also transform.

Getting Started

What’s new in 2.0?

It’s completely rewritten, with reusable gesture recognizers, and improved support for the recent mobile browsers by making use of the touch-action css property when possible. Also support for multiple Hammer instances the same time, so multi-user became possible.


Usage

It’s easy to use, just include the library and create a new instance.

var hammertime = new Hammer(myElement, myOptions);
hammertime.on('pan', function(ev) {
    console.log(ev);
});

By default it adds a set of tap, doubletap, press, horizontal pan and swipe, and the multi-touch pinch and rotate recognizers. The pinch and rotate recognizers are disabled by default because they would make the element blocking, but you can enable them by calling:

hammertime.get('pinch').set({ enable: true });
hammertime.get('rotate').set({ enable: true });

Enabling vertical or all directions for the pan and swipe recognizers:

hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL });
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL });

Also the viewport meta tag is recommended, it gives more control back to the webpage by disableing the doubletap/pinch zoom. More recent browsers that support the touch-action property don’t require this.

<meta name="viewport" content="user-scalable=no, width=device-width,
 initial-scale=1, maximum-scale=1">

More control

You can setup your own set of recognizers for your instance. This requires a bit more code, but it gives you more control about the gestures that are being recognized.

var mc = new Hammer.Manager(myElement, myOptions);

mc.add( new Hammer.Pan({ direction: Hammer.DIRECTION_ALL, threshold: 0 }) );
mc.add( new Hammer.Tap({ event: 'quadrupletap', taps: 4 }) );

mc.on("pan", handlePan);
mc.on("quadrupletap", handleTaps);

The example above creates an instance containing a pan and a quadrupletap gesture. The recognizer instances you create a being executed in the order they are added, and only one can be recognized at the time.

Simultaneous recognizing

If you want to recognize two gestures simultaneously, you can use the the recognizeWith() method. The example below does this with the pinch and rotate recognizers, which will improve usability.

var pinch = new Hammer.Pinch();
var rotate = new Hammer.Rotation();
pinch.recognizeWith(rotate);

Now Hammer is able to run pinch and rotate the same time. You can also separate them with the dropRecognizeWith() method on the recognizer instance.

Require failure of an other recognizer

With the method requireFailure() you can let a recognizer require the failure of an other recognizer before recognizing. This could become useful when you want to nest two gestures, like pan-horizontal and pan-vertical. Removing the dependency could be done with the dropRequireFailure() method.

var horizontal = new Hammer.Pan({
    event: 'panh',
    direction: Hammer.DIRECTION_HORIZONTAL
});
var vertical = new Hammer.Pan({
    event: 'panv',
    direction: Hammer.DIRECTION_VERTICAL
});
vertical.requireFailure(horizontal);

Using requireFailure 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(el, {});

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

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

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

doubleTap.requireFailure(tripleTap);
tap.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.

Tips ‘n Tricks

Try to avoid vertical pan/swipe

Vertical panning is used to scroll your page, and some (older) browsers don’t send events so Hammer isn’t able to recognize these gestures. An option would be to provide an alternative way to do the same action.

Test on a real device

Sometimes Hammer just needs some fine-tuning, like the swipe velocity or some other thresholds. Also, for better performance on slower devices your should try to keep you callbacks as simple as possible.

Remove tap highlight on Windows Phone

IE10 and IE11 on Windows Phone have a small tap highlight when you tap an element. Adding this meta tag removes this.

<meta name="msapplication-tap-highlight" content="no" />

“I can’t select my text anymore!”

Hammer is setting a property to improve the UX of the panning on desktop. Regularly, the desktop browser would select the text while you drag over the page. The user-select css property disables this.

If you care about the text-selection and not so much about the desktop experience, you can simply remove this option from the defaults. Make sure you do this before creating an instance.

delete Hammer.defaults.cssProps.userSelect;


Browser/device support

Don’t worry if your browser or OS isn’t listed, it might work anyway! Internet Explorer 8 and older aren’t supported.

Browsers that have native support for touch-action might have an improved experience then the browsers that don’t.

Browser Pan Pinch Press Rotate Swipe Tap Multi-user Touch-action
Windows Phone 8 – IE10
Android 2.3 – browser
Android 2.3 – FireFox
Android 4.x – browser
Android 4.4 – browser
Android 4 – Chrome
Android 4 – Opera ?
Android 4 – FireFox
Android 4 w/ mouse n/a
iOS 6
iOS 7
BlackBerry 10 ? ?
FireFox OS (simulator) ? ?
Desktop – IE11
Desktop – IE10
Desktop – IE9
Desktop – Chrome
Desktop – Firefox
Desktop – Opera ?
Chromebook ?
Windows 8 /w pen n/a
Windows 8 /w touch n/a
Windows 8 /w mouse n/a
Windows 8 /w mixed n/a

1 Response

  1. Hi,
    I am a newbie to mobile apps.I am using ionic2 to develop my app to andriod.I have a smiley svg where user pans the mood.My issue is pan is working if i move up and down but not in a straight line.if i swipe in straight line my pan event is not fired.do you know why?
    please help me.

    Thanks
    padmini

Leave a Reply

Time limit is exhausted. Please reload CAPTCHA.