Getting Started

Hammer...js?

Hammer is a small javascript library that triggers gesture events on your page. It's not about components or other cool stuff, just the events. If you want those components, you might want to take a look at jQuery Mobile or similar projects.

Usage

Hammer is simple to use, with an jQuery-like API. You don't need to add the new keyword, and the instance methods are chainable.

Event Data

The event argument in the callback contains the same properties for each gesture, making more sense for some than for others.
The gesture that was triggered is found in event.type. Following properties are available in event.gesture. Best practice is to just do a console.log(event) while you're developing.

timestamp {Number} time the event occurred
target {HTMLElement} target element
touches {Array} touches (fingers, mouse) on the screen
pointerType {String} kind of pointer that was used. matches Hammer.POINTER_MOUSE|TOUCH
center {Object} center position of the touches. contains pageX and pageY
deltaTime {Number} the total time of the touches in the screen
deltaX {Number} the delta on x axis we haved moved
deltaY {Number} the delta on y axis we haved moved
velocityX {Number} the velocity on the x
velocityY {Number} the velocity on y
angle {Number} the angle we are moving from the start point.
interimAngle {Number} interim angle since the last movement.
direction {String} the direction moving from the start point. matches Hammer.DIRECTION_UP|DOWN|LEFT|RIGHT
interimDirection {String} interim direction since the last movement. matches Hammer.DIRECTION_UP|DOWN|LEFT|RIGHT
distance {Number} the distance we haved moved
scale {Number} scaling of the touches, needs 2 touches
rotation {Number} rotation of the touches, needs 2 touches *
eventType {String} matches Hammer.EVENT_START|MOVE|END
srcEvent {Object} the source event, like TouchStart or MouseDown *
startEvent {Object} contains the same properties as above,
but from the first touch. this is used to calculate
distances, deltaTime, scaling etc