Getting Started

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

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.

    var element = document.getElementById('test_el');
    var hammertime = Hammer(element).on("tap", function(event) {
        alert('hello!');
    });

You can change the default settings by adding an second argument with options

    var hammertime = Hammer(element, {
        drag: false,
        transform: false
    });

More information is below, but you also can find information at other wiki pages.

Gesture Events

The following events are triggered;

• hold
• tap
• doubletap
• drag, dragstart, dragend, dragup, dragdown, dragleft, dragright
• swipe, swipeup, swipedown, swipeleft, swiperight
• transform, transformstart, transformend
• rotate
• pinch, pinchin, pinchout
• touch
• release
• gesture

Gesture Options

The following options are available, and shown is their default value. You can find more (and the up-to-date) info about it in the source code, in src/gestures/ probably.

behavior:
    contentZooming: "none"
    tapHighlightColor: "rgba(0,0,0,0)"
    touchAction: "none"
    touchCallout: "none"
    userDrag: "none"
    userSelect: "none"
doubleTapDistance: 20
doubleTapInterval: 300
drag: true
dragBlockHorizontal: false
dragBlockVertical: false
dragDistanceCorrection: true
dragLockMinDistance: 25
dragLockToAxis: false
dragMaxTouches: 1
dragMinDistance: 10
gesture: false
hold: true
holdThreshold: 2
holdTimeout: 500
preventDefault: false
preventMouse: false
release: true
showTouches: true
swipe: true
swipeMaxTouches: 1
swipeMinTouches: 1
swipeVelocityX: 0.7
swipeVelocityY: 0.6
tap: true
tapAlways: true
tapMaxDistance: 10
tapMaxTime: 250
touch: true
transform: true
transformMinRotation: 1
transformMinScale: 0.01

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