Popularity
9.2
Stable
Activity
0.0
Stable
23,842
531
2,715

Code Quality Rank: L4
Programming language: JavaScript
License: MIT License
Tags: Gesture     Touch     Gestures    
Latest version: v2.0.8

hammer.js alternatives and similar libraries

Based on the "Gesture" category.
Alternatively, view hammer.js alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of hammer.js or a related project?

Add another 'Gesture' Library

README

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][contribution-guidelines]. If you're looking for another form of contribution, we love help answering questions on our slack channel.

License

[MIT][license]

<!-- Examples -->

<!-- Contributions -->


*Note that all licence references and agreements mentioned in the hammer.js README section above are relevant to that project's source code only.