Описание тега hammer.js

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 callingjs 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.