-
Notifications
You must be signed in to change notification settings - Fork 2.6k
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);
});
More information is below, but you also can find some information at other wiki pages.
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)
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
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