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.

    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 gestures are available, you can find options for it in gestures.js

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

Gesture Options

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

drag: true
drag_block_horizontal: false
drag_block_vertical: false
drag_lock_to_axis: false
drag_max_touches: 1
drag_min_distance: 10
hold: true
hold_threshold: 3
hold_timeout: 500
prevent_default: true
prevent_mouseevents: false
release: true
show_touches: true
stop_browser_behavior: Object
swipe: true
swipe_max_touches: 1
swipe_velocity: 0.7
tap: true
tap_always: true
tap_max_distance: 10
tap_max_touchtime: 250
doubletap_distance: 20
doubletap_interval: 300
touch: true
transform: true
transform_always_block: false
transform_min_rotation: 1
transform_min_scale: 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