Tips & Tricks

Disable viewport scaling

This is something you (always) should add to your page when using Hammer.js. It stops doubletap from zooming, and let the multitouch gestures work.

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

Improve drag/swipe experience

To improve the user experience while doing a drag/swipe, you should prevent the browser from scrolling. This can be done with the ev.gesture.preventDefault() method. For vertical swiping, dragging should be prevented, or it wont work (in most cases..)

One hammer to rule them all.

When you are building an app (phonegap, webapp, or something), it is a smart idea to make use of the event delegation Hammer offers. You simply create an instance on the document.body and you can bind any gesture event to any element on the page, without having to create a new instance.

By doing this, you may create problems on IE10 mobile, blocking the scrolling of the page. Playing around with the stop_browser_behavior.touchAction option could fix this.

Some interesting tickets (with solutions)

• tap target and release target are always the same.
• adding hammer to the body tag in ie10 disables scrolling via touch