1. @egjs/hammerjs
A javascript library for multi-touch gestures
@egjs/hammerjs
Package: @egjs/hammerjs
Created by: naver
Last modified: Fri, 22 Sep 2023 02:12:11 GMT
Version: 2.0.17
License: MIT
Downloads: 3,775,117
Repository: https://github.com/naver/hammer.js

Install

npm install @egjs/hammerjs
yarn add @egjs/hammerjs

hammer.js NPM Version NPM Downloads Build Status

A JavaScript library for detecting touch gestures.

What is this repository?

It seems like that hammer.js repository is no more activated.

But our library (egjs) has deep dependency to hammer.js for touch interaction.
And some pending issues were critical for us to make more light size, compatible with node.js , resolve module crash on umd envrioment.

So we solved following issues that are not resolved in original hammer.js

We would maintain this repository to fix remain bugs and enhance it until original repository activates.

Installation

NPM

 npm install --save @egjs/hammerjs

or

Yarn

 yarn add @egjs/hammerjs

or

CDN

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

We did not provide CDN yet. leave the link to original hammerjs as is.

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

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin