Hammer.js: A JavaScript Touch Gesture Library
Hammer.js is a small JavaScript library that turns touch and pointer input on a DOM element into named gestures like tap, press, and swipe. It does one job well. You get common touch gestures without hand-writing a state machine. Quick-start events cover press, tap, and doubletap out of the box; anything past that, like a triple-tap, means wiring up a Hammer.Manager and recognizer yourself, using the same .on() pattern.
What Is Hammer.js?
Hammer.js is a JavaScript library that detects multi-touch gestures on DOM elements, translating raw touch and pointer input into events like tap, press, doubletap, and swipe. You attach it to an element with new Hammer(element) and subscribe to a gesture with .on(), the same pattern used for any DOM event listener. It ships on npm as the hammerjs package and is also available via cdnjs, under an MIT license that permits commercial use.
Supported Gestures and Recognizers
- ✓Quick-start events for press, tap, and doubletap fire as soon as you create a new Hammer(element) instance, with no extra configuration.
- ✓Swipe detection is demonstrated in the project's own CodePen examples alongside tap, double tap, and press.
- ✓A Hammer.Manager lets you register custom recognizers, like the README's own tripletap example built from Hammer.Tap with a taps: 3 option.
- ✓Recognizers are added to the manager with .add() and subscribed to with .on(), mirroring the same event-listener pattern used for the quick-start gestures.
- ✓Distributed as the hammerjs package on npm, installable with npm or Yarn, or loaded directly from a CDN via cdnjs.
- ✓MIT-licensed, so the gesture recognition logic can be embedded in closed-source or commercial products.
Getting Started with Hammer.js
The quick-start path, straight from the README: get a reference to an element, wrap it with `var hammer = new Hammer(square);`, then subscribe with `hammer.on('press', function(e) { ... });` — press, tap, and doubletap all work this way without further setup. For a gesture that isn't in that quick-start list, like a triple-tap, the README shows building it manually: create `var manager = new Hammer.Manager(square);`, define a recognizer with `new Hammer.Tap({ event: 'tripletap', taps: 3 })`, add it with `manager.add(TripleTap)`, then subscribe with `manager.on('tripletap', function(e) { ... });`.
Common Use Cases
- •Adding swipe-to-dismiss or swipe-to-navigate interactions to a mobile web gallery or carousel.
- •Wiring a press-and-hold action into a touch UI using the built-in press event instead of hand-rolled touchstart/touchend timers.
- •Detecting double-tap or a custom multi-tap gesture, like the README's tripletap example, on an image viewer or map widget.
- •Adding touch gesture support to a vanilla JS or framework-agnostic component without pulling in a full UI framework's gesture system.
Strengths
- ✓The quick-start API is genuinely quick: new Hammer(element) plus .on('press', fn) is the entire setup for the most common gestures.
- ✓MIT license, so there's no licensing friction for commercial or closed-source use.
- ✓Small, single-purpose library — it recognizes gestures and doesn't also try to be a UI framework or animation library.
- ✓Custom recognizers, like the tripletap example, reuse the same .on() event pattern as the built-in gestures, so there's no separate API to learn.
Known Limitations
- △Anything beyond the three quick-start events (press, tap, doubletap) requires manually building a Hammer.Manager and recognizer — no larger built-in gesture preset list is documented in the README.
- △The README doesn't document current release or version activity, so you can't tell from it alone whether the project is under active development.
- △No TypeScript types, framework bindings, or bundler-specific setup guidance are documented in the README — wiring it into React, Vue, or similar is on you.
- △The Examples section only links out to CodePen demos for tap, double tap, press, and swipe — there's no in-repo interactive example for a more advanced case like the custom tripletap gesture.
Alternatives to Hammer.js
Frequently Asked Questions
Hammer.js is released under the MIT license, which permits commercial use, modification, and redistribution without paying a fee or open-sourcing your own code. That makes it a safe pick for both personal and commercial projects.
Hammer.js listens for pointer and touch input on whatever DOM element you attach it to with new Hammer(element), so the same .on('press', ...) style event handling applies regardless of device type. The README doesn't document a specific desktop browser support matrix beyond that.
Tap and press are both quick-start events in Hammer.js, but they cover different gestures: tap fires on a brief touch, while press corresponds to holding the touch down, as shown in the README's own press example toggling a CSS class on e.target. The README doesn't document their exact timing thresholds.
Hammer.js's README shows this exact example: create a Hammer.Manager for your element, instantiate new Hammer.Tap({ event: 'tripletap', taps: 3 }), add it to the manager with .add(), then subscribe with manager.on('tripletap', callback).
Hammer.js's GitHub repository doesn't list current release or changelog activity in its README, so maintenance status isn't clearly documented here. Check the repository's commit history and issue tracker directly for up-to-date activity before depending on it for a new project.
Out of the box, Hammer.js's quick-start events cover press, tap, and doubletap, and its examples page also demonstrates swipe. Beyond that, Hammer.js supports custom gestures, like the README's own tripletap example, built with a Hammer.Manager and a recognizer such as Hammer.Tap.
The problem it solves
Detecting a swipe or a long-press in the browser normally means listening to raw touchstart/touchmove/touchend or pointer events yourself, tracking start position, distance, and timing by hand, and redoing that wiring for every element. Hammer.js's README pitches it as covering exactly that gap: attach it to an element and it emits named events like press, tap, and doubletap instead of you building that tracking logic from scratch.
How to install / try
Install it from npm with `npm install --save hammerjs`, or with Yarn using `yarn add hammerjs`. If you don't want a build step, cdnjs hosts hammer.js for direct `<script>` tag use. Beyond that, the README doesn't document a minimum browser or bundler version.
Who should try it — and who should skip
A developer wiring touch support into a vanilla JS carousel, image viewer, or custom UI component is the target user for Hammer.js — the quick-start events cover press, tap, and doubletap without extra setup, and the README's own tripletap example shows how to bolt on more. If your project needs pinch, rotate, or drag-and-resize as first-class gestures, or you want TypeScript types and framework bindings included, none of that is documented here, so budget time to build it yourself or look elsewhere.
Is hammer.js worth your time?
ChatGPT, Claude and Perplexity can all read this page. Ask one of them what it makes of hammer.js.