A JavaScript library for multi-touch gestures in web applications
—
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Pending
The risk profile of this skill
Complete set of gesture recognizers for detecting touch patterns including tap, pan, swipe, pinch, rotation, and press gestures.
Base class for all gesture recognizers providing core recognition functionality.
/**
* Base class for all gesture recognizers
* @param {object} [options] - Recognizer configuration options
*/
class Recognizer {
constructor(options);
/** Update recognizer options */
set(options);
/** Allow simultaneous recognition with another recognizer */
recognizeWith(otherRecognizer);
/** Drop simultaneous recognition */
dropRecognizeWith(otherRecognizer);
/** Require another recognizer to fail first */
requireFailure(otherRecognizer);
/** Drop failure requirement */
dropRequireFailure(otherRecognizer);
/** Check if has failure requirements */
hasRequireFailures();
/** Check if can recognize simultaneously */
canRecognizeWith(otherRecognizer);
/** Emit gesture events */
emit(input);
/** Try to emit after checks */
tryEmit(input);
/** Check if can emit events */
canEmit();
/** Process input data */
recognize(inputData);
/** Reset recognizer state */
reset();
}Recognizes tap and multi-tap gestures with configurable timing and position thresholds.
/**
* Recognizes tap and multi-tap gestures
* @param {object} [options] - Tap recognizer options
*/
class TapRecognizer extends Recognizer {
constructor(options);
}
// Default options for tap recognizer
const TapDefaults = {
event: 'tap',
pointers: 1,
taps: 1,
interval: 300,
time: 250,
threshold: 9,
posThreshold: 10
};
// Aliases
const Tap = TapRecognizer;Usage Examples:
import Hammer from "hammerjs";
// Single tap
const singleTap = new Hammer.Tap();
mc.add(singleTap);
// Double tap
const doubleTap = new Hammer.Tap({
event: 'doubletap',
taps: 2
});
mc.add(doubleTap);
// Custom tap with longer timeout
const longTap = new Hammer.Tap({
time: 500,
threshold: 15
});
mc.add(longTap);
// Listen to tap events
mc.on('tap', function(ev) {
console.log('Taps:', ev.tapCount);
});Recognizes pan/drag gestures with directional control and threshold settings.
/**
* Recognizes pan/drag gestures
* @param {object} [options] - Pan recognizer options
*/
class PanRecognizer extends AttrRecognizer {
constructor(options);
}
// Default options for pan recognizer
const PanDefaults = {
event: 'pan',
threshold: 10,
pointers: 1,
direction: Hammer.DIRECTION_ALL
};
// Aliases
const Pan = PanRecognizer;Usage Examples:
// Horizontal pan only
const horizontalPan = new Hammer.Pan({
direction: Hammer.DIRECTION_HORIZONTAL
});
mc.add(horizontalPan);
// Vertical pan with custom threshold
const verticalPan = new Hammer.Pan({
direction: Hammer.DIRECTION_VERTICAL,
threshold: 20
});
mc.add(verticalPan);
// Listen to pan events
mc.on('panstart panmove panend', function(ev) {
console.log('Pan:', ev.type, ev.deltaX, ev.deltaY, ev.direction);
});
// Directional pan events
mc.on('panleft panright panup pandown', function(ev) {
console.log('Directional pan:', ev.type);
});Recognizes swipe gestures with velocity and direction requirements.
/**
* Recognizes swipe gestures with velocity
* @param {object} [options] - Swipe recognizer options
*/
class SwipeRecognizer extends AttrRecognizer {
constructor(options);
}
// Default options for swipe recognizer
const SwipeDefaults = {
event: 'swipe',
threshold: 10,
velocity: 0.3,
direction: Hammer.DIRECTION_HORIZONTAL | Hammer.DIRECTION_VERTICAL,
pointers: 1
};
// Aliases
const Swipe = SwipeRecognizer;Usage Examples:
// Horizontal swipe only
const horizontalSwipe = new Hammer.Swipe({
direction: Hammer.DIRECTION_HORIZONTAL,
velocity: 0.5
});
mc.add(horizontalSwipe);
// Custom swipe with higher velocity requirement
const fastSwipe = new Hammer.Swipe({
velocity: 0.8,
threshold: 20
});
mc.add(fastSwipe);
// Listen to swipe events
mc.on('swipe', function(ev) {
console.log('Swipe:', ev.direction, ev.velocity);
});
// Directional swipe events
mc.on('swipeleft swiperight swipeup swipedown', function(ev) {
console.log('Directional swipe:', ev.type);
});Recognizes press and hold gestures with configurable hold time.
/**
* Recognizes press and hold gestures
* @param {object} [options] - Press recognizer options
*/
class PressRecognizer extends Recognizer {
constructor(options);
}
// Default options for press recognizer
const PressDefaults = {
event: 'press',
pointers: 1,
time: 251,
threshold: 9
};
// Aliases
const Press = PressRecognizer;Usage Examples:
// Long press with 1 second hold
const longPress = new Hammer.Press({
time: 1000
});
mc.add(longPress);
// Sensitive press with smaller movement threshold
const sensitivePress = new Hammer.Press({
threshold: 5,
time: 200
});
mc.add(sensitivePress);
// Listen to press events
mc.on('press', function(ev) {
console.log('Press started');
});
mc.on('pressup', function(ev) {
console.log('Press ended');
});Recognizes pinch/zoom gestures for multi-touch scaling interactions.
/**
* Recognizes pinch/zoom gestures
* @param {object} [options] - Pinch recognizer options
*/
class PinchRecognizer extends AttrRecognizer {
constructor(options);
}
// Default options for pinch recognizer
const PinchDefaults = {
event: 'pinch',
threshold: 0,
pointers: 2
};
// Aliases
const Pinch = PinchRecognizer;Usage Examples:
// Basic pinch
const pinch = new Hammer.Pinch();
mc.add(pinch);
// Pinch with scale threshold
const thresholdPinch = new Hammer.Pinch({
threshold: 0.1
});
mc.add(thresholdPinch);
// Listen to pinch events
mc.on('pinchstart pinchmove pinchend', function(ev) {
console.log('Pinch:', ev.type, ev.scale, ev.rotation);
});
// Directional pinch events
mc.on('pinchin pinchout', function(ev) {
console.log('Scale direction:', ev.type, ev.scale);
});Recognizes rotation gestures for multi-touch rotation interactions.
/**
* Recognizes rotation gestures
* @param {object} [options] - Rotate recognizer options
*/
class RotateRecognizer extends AttrRecognizer {
constructor(options);
}
// Default options for rotate recognizer
const RotateDefaults = {
event: 'rotate',
threshold: 0,
pointers: 2
};
// Aliases
const Rotate = RotateRecognizer;Usage Examples:
// Basic rotation
const rotate = new Hammer.Rotate();
mc.add(rotate);
// Rotation with angle threshold
const thresholdRotate = new Hammer.Rotate({
threshold: 15 // Minimum 15 degrees
});
mc.add(thresholdRotate);
// Listen to rotate events
mc.on('rotatestart rotatemove rotateend', function(ev) {
console.log('Rotate:', ev.type, ev.rotation);
});Methods for defining relationships between recognizers.
/**
* Set up recognizer relationships for complex gesture patterns
*/
// Simultaneous recognition
panRecognizer.recognizeWith(rotateRecognizer);
// Require failure (one must fail for other to succeed)
tapRecognizer.requireFailure(doubleTapRecognizer);
// Drop relationships
panRecognizer.dropRecognizeWith(rotateRecognizer);
tapRecognizer.dropRequireFailure(doubleTapRecognizer);Usage Examples:
// Allow pan and rotate simultaneously
const pan = new Hammer.Pan();
const rotate = new Hammer.Rotate();
pan.recognizeWith(rotate);
mc.add([pan, rotate]);
// Single tap waits for double tap to fail
const singleTap = new Hammer.Tap({ event: 'singletap' });
const doubleTap = new Hammer.Tap({ event: 'doubletap', taps: 2 });
singleTap.requireFailure(doubleTap);
mc.add([singleTap, doubleTap]);interface RecognizerOptions {
event?: string;
pointers?: number;
threshold?: number;
time?: number;
interval?: number;
taps?: number;
posThreshold?: number;
velocity?: number;
direction?: number;
enable?: boolean;
}
interface AttrRecognizer extends Recognizer {
attrTest(input): boolean;
process(input): number;
}