Getting Started

Hammer became simpler to use, with an jQuery-like API. You don't need to add the new keyword, and the eventlisteners 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
    });

Events can be added/removed with the on and off methods, just like you would in jQuery. Event delegation is also possible when you use the jQuery plugin.

    $('#test_el').hammer().on("tap", ".nested_el", function(event) {
        console.log(this, event);
    });

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.

doubletap_distance: 20
doubletap_interval: 300
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_max_distance: 10
tap_max_touchtime: 250
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
direction   {String}        the direction we are moving. 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