Hammer is an open-source library that can recognize gestures made by touch, mouse and pointerEvents. It has support for multiple instances the same time, so you can start creating multi-user touch interfaces.
Hammer is a open-source library that can recognize gestures made by touch, mouse and pointerEvents. It has support for multiple instances the same time, so you can start creating multi-user touch interfaces. Hammer doesn't have any dependencies, and it's small, only 3.7 kB minified + gzipped!
Visit the website: http://hammerjs.github.io/
Usage
It's easy to use, just include the library and create a new instance.
js
var hammertime = new Hammer(element, options);
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
js
mc.get('pinch').set({ enable: true });
mc.get('rotate').set({ enable: true });
Also the viewport meta tag is recommended, it gives more control back to the webpage by disabling the
doubletap/pinch zoom. More recent browsers that support the touch-action property don't require this.
html
<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.
js
var myOptions = { };
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.
See the pages about the recognizeWith and requireFailure for
more details.
Notes
It's recommended to listen to this loop while using hammer.js. Follow @jorikdelaporik for tweets about this library.
Special thanks to Pepe Cano for his contributions.
