Hammer.js notes

HammerNotes.js

var myElement = document.getElementById('myElement');

// manage an element, and its listeners
var mc = new Hammer.Manager(myElement);

// a pan event begins when we exceed the threshold in the direction
// once the pan event has begun, pan events will fire for all directions
var pan = new Hammer.Pan({
  direction: Hammer.DIRECTION_LEFT,
  threshold: 5 // Minimal pan distance required before recognizing
});

// a touch gesture is not considered a swipe until we release
var swipe = new Hammer.Swipe({
  threshold:10,
  velocity: 0.5,// Minimal velocity required before recognizing, unit is in px per ms.
  direction: Hammer.DIRECTION_ALL
});

// by default every touch and release action will only be considered either a pan OR a swipe
// if we want a gesture to be a candidate for two simultaneous gestures, we .recognizeWith
swipe.recognizeWith(pan);
mc.add(pan);
mc.add(swipe);

// listen to events...
// A pan event begins when we exceed the threshold and direction
mc.on("swipe pan", function(ev) {
  ev.preventDefault();
  myElement.textContent = ev.type +" gesture detected." + ev.direction;
  console.log(ev.type, ev.direction);  
});