Guide · Open source

How to use hammer.js: install, detect gestures and handle events

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

Hammer.js is a JavaScript library that detects touch gestures on a web page element and reports them as events. This guide is for web developers who want to add touch interactions without writing low-level touch handling. By the end you will know how to install it, attach it to an element, respond to built-in gestures, and define a custom recognizer.

Hammer.jshammerjs/hammer.js · ★ 24.3k · MIT Install options & downloads

Quick start

1Install the library. Run npm install --save hammerjs or yarn add hammerjs in your project. Node.js is needed for these installs.
2Select an element. Use document.querySelector to get a reference to the element that should receive gestures.
3Create a Hammer instance. Call new Hammer(element) with that reference.
4Subscribe to a quick start event. Use hammer.on with press, tap, or doubletap and write your response in the handler.
5Define a custom gesture if needed. Create a Hammer.Manager, add a Hammer.Tap recognizer with a custom event name and taps count, then subscribe with manager.on.

What Hammer.js does

Hammer.js listens for touch gestures on an element you choose and reports them as events. The README names press, tap, and double tap as quick start gestures, and the analysis for this directory also lists swipe.

You attach it to an element, then write your own code to respond to each gesture.

Install Hammer.js with npm, Yarn or a CDN

Hammer.js is installed through npm, Yarn, or a CDN. The npm and Yarn installs need Node.js. The README lists the CDN option as a link to cdnjs.com, which hosts the library.

npm: use the command below
Yarn: yarn add hammerjs
CDN: see https://cdnjs.com/libraries/hammer.js/

npm install --save hammerjs

Attach Hammer to an element and listen for a quick start gesture

The quick start option covers gestures that Hammer already recognizes. Get a reference to an element, create a Hammer instance with it, then subscribe to an event such as press, tap, or doubletap.

The example below toggles a class named expand on press and logs the event. Your own code goes inside the handler.

var square = document.querySelector('.square');
var hammer = new Hammer(square);
hammer.on('press', function(e) {
  e.target.classList.toggle('expand');
  console.log("You're pressing me!");
  console.log(e);
});

Create a custom gesture such as triple tap

For gestures beyond the quick start events, the README uses a manager, a recognizer, and a subscription. You create a Hammer.Manager for the element, create a Hammer.Tap recognizer with a custom event name and a tap count, add the recognizer to the manager, then subscribe to that event name.

The README's example uses a triple tap with taps set to 3.

Create a manager: new Hammer.Manager(element)
Create a recognizer: new Hammer.Tap({ event: 'tripletap', taps: 3 })
Add it: manager.add(TripleTap)
Subscribe: manager.on('tripletap', handler)

var square = document.querySelector('.square');
var manager = new Hammer.Manager(square);
var TripleTap = new Hammer.Tap({
  event: 'tripletap',
  taps: 3
});
manager.add(TripleTap);
manager.on('tripletap', function(e) {
  e.target.classList.toggle('expand');
  console.log("You're triple tapping me!");
  console.log(e);
});

Look at examples and full documentation

The README links to live examples for tap, double tap, press, and swipe on CodePen. For the full list of quick start events and further detail, the README points to the external documentation site at hammerjs.github.io, since the README itself covers only the basics.

Tap example: codepen.io/choskim/pen/WZggmg
Double tap example: codepen.io/choskim/pen/vezzwZ
Press example: codepen.io/choskim/pen/RLYebL
Swipe example: codepen.io/choskim/pen/rGZqxa

Contribute or ask questions

The README invites issue reports and pull requests, and asks contributors to read CONTRIBUTING.md first. People who want to help answer questions can join the Slack channel linked in the README.

What people use it for

Toggle a class on an element when the user presses and holds it
Respond to a double tap on an image or card in a web app
Use a custom triple-tap gesture to trigger an action on a touch screen
Start from the swipe example on CodePen when building a touch carousel

Frequently asked questions

Is Hammer.js free to use?

Yes. Hammer.js is released under the MIT licence, as stated in the README and the license file it links to. Check the LICENSE.md file in the repository for the full text.

How do I install hammer.js?

Use npm install --save hammerjs or yarn add hammerjs in your project. You can also load it from the CDN listed at cdnjs.com. The npm and Yarn installs require Node.js.

Do I need Node.js to use hammer.js?

Node.js is needed for the npm and Yarn installs. The README lists a CDN option as well, which does not require installing packages through Node.

Which gestures does hammer.js detect?

The README's quick start covers press, tap, and doubletap. The examples section also links to swipe. For the full list of quick start events, the README points to the external documentation.

How do I detect a custom gesture like triple tap?

Create a Hammer.Manager for your element, add a Hammer.Tap recognizer with an event name and taps set to 3, then subscribe to that event name with manager.on. The README shows this exact pattern.

What are alternatives to hammer.js?

The analysis for this directory lists Interact.js, AlloyFinger, the browser's built-in Pointer Events API, and QuoJS as comparable projects. Choose based on which gestures and features your project needs.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Hammer.js suits web developers who want press, tap, double tap, and swipe events without writing raw touch handling, and it is free under the MIT licence. It is not a fit for non-coders, or for projects that need gesture logic beyond the basic recognizers, since the README covers little beyond those and sends readers to an external documentation site.

Install options & downloads