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
Core gesture management functionality providing the main constructor and Manager class for coordinating gesture recognition on DOM elements.
Creates a gesture manager with default recognizer preset for common gestures.
/**
* Creates a Manager instance with default recognizer preset
* @param {HTMLElement} element - Target DOM element for gesture recognition
* @param {HammerOptions} [options] - Configuration options
* @returns {Manager} Manager instance with default recognizers
*/
function Hammer(element, options);Library version string for feature detection and compatibility checks.
/**
* Current version of Hammer.js library
* @type {string}
*/
Hammer.VERSION;Usage Examples:
import Hammer from "hammerjs";
// Basic usage with defaults
const mc = new Hammer(document.getElementById('myElement'));
// With custom options
const mc = new Hammer(element, {
touchAction: 'pan-y',
recognizers: [
[Hammer.Tap],
[Hammer.Pan, { direction: Hammer.DIRECTION_HORIZONTAL }]
]
});Core gesture manager that coordinates recognizers and input handling.
/**
* Core gesture manager coordinating recognizers and input
* @param {HTMLElement} element - Target DOM element
* @param {HammerOptions} [options] - Configuration options
*/
class Manager {
constructor(element, options);
}Methods for configuring and managing the manager instance.
/**
* Update manager options
* @param {HammerOptions} options - Options to merge with current settings
* @returns {Manager} Manager instance for chaining
*/
set(options);Usage Examples:
// Update touch action
mc.set({ touchAction: 'pan-x' });
// Update multiple options
mc.set({
enable: true,
touchAction: 'manipulation'
});Methods for adding, removing, and retrieving gesture recognizers.
/**
* Get recognizer by name or instance
* @param {string|Recognizer} recognizer - Recognizer name or instance
* @returns {Recognizer|null} Recognizer instance or null if not found
*/
get(recognizer);
/**
* Add a recognizer to the manager
* @param {Recognizer} recognizer - Recognizer instance to add
* @returns {Recognizer} The added recognizer
*/
add(recognizer);
/**
* Remove a recognizer from the manager
* @param {string|Recognizer} recognizer - Recognizer to remove
* @returns {Manager} Manager instance for chaining
*/
remove(recognizer);Usage Examples:
// Add custom recognizer
const panRecognizer = new Hammer.Pan({ direction: Hammer.DIRECTION_ALL });
mc.add(panRecognizer);
// Get recognizer by name
const tapRecognizer = mc.get('tap');
// Remove recognizer
mc.remove('swipe');
mc.remove(panRecognizer);Methods for binding, unbinding, and emitting gesture events.
/**
* Bind event listeners for gesture events
* @param {string} events - Space-separated event names
* @param {Function} handler - Event handler function
* @returns {Manager} Manager instance for chaining
*/
on(events, handler);
/**
* Unbind event listeners
* @param {string} events - Space-separated event names
* @param {Function} handler - Event handler to remove
* @returns {Manager} Manager instance for chaining
*/
off(events, handler);
/**
* Emit gesture events manually
* @param {string} event - Event name to emit
* @param {object} data - Event data object
*/
emit(event, data);Usage Examples:
// Bind single event
mc.on('tap', function(ev) {
console.log('Tap at:', ev.center.x, ev.center.y);
});
// Bind multiple events
mc.on('panstart panmove panend', function(ev) {
console.log('Pan event:', ev.type, ev.deltaX, ev.deltaY);
});
// Unbind event
const handler = function(ev) { console.log('Pan:', ev.deltaX); };
mc.on('pan', handler);
mc.off('pan', handler);Methods for controlling gesture recognition and cleanup.
/**
* Stop gesture recognition, optionally forcing stop
* @param {boolean} [force] - Force stop all recognizers
*/
stop(force);
/**
* Process input data through recognizers (internal)
* @param {object} inputData - Input event data
*/
recognize(inputData);
/**
* Clean up and destroy the manager
*/
destroy();Usage Examples:
// Temporarily stop recognition
mc.stop();
// Force stop all active recognizers
mc.stop(true);
// Clean up when done
mc.destroy();Key properties available on Manager instances.
interface ManagerProperties {
/** Target DOM element */
element: HTMLElement;
/** Event handlers object */
handlers: object;
/** Current gesture session data */
session: object;
/** Array of active recognizers */
recognizers: Array<Recognizer>;
/** Configuration options */
options: HammerOptions;
/** Input handler instance */
input: Input;
/** TouchAction instance */
touchAction: TouchAction;
}Static default configuration options.
/**
* Default configuration options
*/
Hammer.defaults = {
/** Enable DOM event triggers (default: false) */
domEvents: boolean;
/** Touch action mode (default: 'compute') */
touchAction: string;
/** Enable gesture recognition (default: true) */
enable: boolean;
/** Input target element (default: null) */
inputTarget: Element | null;
/** Force input class (default: null) */
inputClass: Function | null;
/** Default recognizer setup */
preset: Array;
/** CSS properties for optimization */
cssProps: object;
};interface HammerOptions {
domEvents?: boolean;
touchAction?: string;
enable?: boolean;
inputTarget?: Element | null;
inputClass?: Function | null;
recognizers?: Array;
cssProps?: object;
}