hammer.js README

The project's README from github.com/hammerjs/hammer.js. As one markdown file: README.md.

hammer.js NPM Version NPM Downloads Build Status

A JavaScript library for detecting touch gestures.

Installation

NPM

npm install --save hammerjs

or

Yarn

yarn add hammerjs

or

CDN

https://cdnjs.com/libraries/hammer.js/

Usage

hammer.js has a quick start option for gestures it already recognizes.

// Get a reference to an element.
var square = document.querySelector('.square');

// Create an instance of Hammer with the reference.
var hammer = new Hammer(square);

// Subscribe to a quick start event: press, tap, or doubletap.
// For a full list of quick start events, read the documentation.
hammer.on('press', function(e) {
  e.target.classList.toggle('expand');
  console.log("You're pressing me!");
  console.log(e);
});

If you want to recognize your own gestures, such as tripletap, then you'll have to use these steps:

// Get a reference to an element.
var square = document.querySelector('.square');

// Create a manager to manage the element.
var manager = new Hammer.Manager(square);

// Create a recognizer.
var TripleTap = new Hammer.Tap({
  event: 'tripletap',
  taps: 3
});

// Add the recognizer to the manager.
manager.add(TripleTap);

// Subscribe to the event.
manager.on('tripletap', function(e) {
  e.target.classList.toggle('expand');
  console.log("You're triple tapping me!");
  console.log(e);
});

Examples

Documentation

For further information regarding hammer.js, please read our documentation.

Contributions Github Issues Github PRs Slack

Feel encouraged to report issues or submit pull requests. When you're ready to do either, read our contribution guidelines. If you're looking for another form of contribution, we love help answering questions on our slack channel.

License

MIT

hammer.js (hammerjs/hammer.js)

interaction
Searching Database…

24.3K ·GitHub
Hammer.js
What is this?Hammer.js is a JavaScript library that lets a web page recognize touch gestures, so you don't have to interpret raw touch events yourself.
Is this something I install on my phone, or add to a website?It's a frontend JavaScript library: you include it in a web page, and it runs wherever that page runs — desktop browsers and touch devices like phones and tablets.
How do I add it to my project?Install it with npm or yarn, or just include it from a CDN in your page.
Will it bloat my project with dependencies?No — the package ships with zero runtime dependencies, so it won't drag anything extra into your bundle.
What if I need a gesture it doesn't know, like a tripletap?That takes extra work: for a gesture like tripletap the README says you'll have to follow its steps to set up recognition yourself — it doesn't come for free.
Can I use it in commercial projects, and what does it cost?It's MIT-licensed, so it's free to use, modify and ship — including commercially.
Is there a ready-made minified file I can serve in production?Yes — the repo's build step produces hammer.min.js together with a source map, so you can serve the minified version directly.
What are similar projects?dragula, Sortable, better-scroll, swiper, interact.js, velocity, masonry, typeahead.js
Which topics is it in?interaction, hybrid, scripts, yarn, map, cdn, touch, dom, javascript-library, browser, mobile, ui
Creator
hammerjs
Size
9.9 MB
Stars
24.3K
Updated
CommitMay 28
Age
14y
Commits · 90 Days