| layout | title |
|---|---|
default |
Getting Started |
Hammer is a open-source library that can recognize gestures made by touch, mouse and pointerEvents. It doesn't have any dependencies, and it's small, only {{site.data.hammer.gzipped}} minified + gzipped!
- Minified code (v{{site.data.hammer.version}})
- Uncompressed code (v{{site.data.hammer.version}})
- Changelog
- Browse the source on GitHub
- Looking for the 1.1 version? You can find it here.
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 disabling 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">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 are 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.
Hammerjs and its associated libraries are developed entirely by volunteer contributors, but is currently in low maintenance mode.
Lots of love to 
It's recommended to listen to this loop while using hammer.js.