Tips & Tricks

Jorik Tangelder edited this page Sep 1, 2014 · 21 revisions

This WIKI is for the 1.1 version. For the 2.0 documentation, go to the website.

Sometimes Hammer doesn't act like you want it to. In most cases this has to do with the default behaviour of the browser. Preventing the touch behaviour of the browser is the solution for almost all of the problems.

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. Also, Chrome Mobile removes the 300ms delay on your page, so thats a win.

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

Improve drag/swipe/transform experience

To improve the user experience while doing a gesture, 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..)

For the best overall experience, you can set the preventDefault option to true. This gives Hammer the full control over the touch input on the given element. But it disables all default browser actions.

Best practices

Horizontal swipe and drag
var options = {
  dragLockToAxis: true,
  dragBlockHorizontal: true
var hammertime = new Hammer(element, options);
hammertime.on("dragleft dragright swipeleft swiperight", function(ev){ });
Transform (pinch, rotate)
var options = {
  preventDefault: true
var hammertime = new Hammer(element, options);
hammertime.on("transform", function(ev){ });
Vertical swipe and drag

Because vertical movements are very tricky on devices, people intent to scroll, you should try to avoid these. If you do want them, the best way to configure Hammer is just to prevent the defaults.

var options = {
  preventDefault: true
var hammertime = new Hammer(element, options);
hammertime.on("dragup dragdown swipeup swipedown", function(ev){ });

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 behavior.touchAction option could fix this.

Some interesting tickets (with solutions)

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.