-
Notifications
You must be signed in to change notification settings - Fork 2.6k
Tips & Tricks
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.
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">
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.
var options = {
dragLockToAxis: true,
dragBlockHorizontal: true
};
var hammertime = new Hammer(element, options);
hammertime.on("dragleft dragright swipeleft swiperight", function(ev){ });var options = {
preventDefault: true
};
var hammertime = new Hammer(element, options);
hammertime.on("transform", function(ev){ });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){ });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.