JavaScript Touch Events – hammer.js

import Hammer from 'hammerjs'

const gestures = [
  // TAP
  { event: 'tap' },
  { event: 'doubletap' },
  { event: 'trippletap' },
  { event: 'quadrupletap' },
  // PRESS
  { event: 'press' },
  { event: 'pressup' },
  // SWIPE
  { event: 'swipeleft' },
  { event: 'swiperight' },
  { event: 'swipeup' },
  { event: 'swipedown' },
  // ROTATION
  { event: 'rotatestart' },
  { event: 'rotatemove' },
  { event: 'rotateend' },
  { event: 'rotatecancel' },
  // PINCH
  { event: 'pinchstart' },
  { event: 'pinchmove' },
  { event: 'pinchend' },
  { event: 'pinchcancel' },
  { event: 'pinchin' },
  { event: 'pinchout' }
]

const mcBox = document.querySelector('[data-module="touch-input"]')
const mc = new Hammer(mcBox)

mc.add(new Hammer.Tap({ event: 'doubletap', taps: 2 }))
mc.add(new Hammer.Tap({ event: 'trippletap', taps: 3 }))
mc.add(new Hammer.Tap({ event: 'quadrupletap', taps: 4 }))

mc.get('doubletap').recognizeWith('tap')
mc.get('trippletap').recognizeWith('tap')
mc.get('quadrupletap').recognizeWith('tap')

mc.get('swipe').set({ direction: Hammer.DIRECTION_ALL })
mc.get('pinch').set({ enable: true })
mc.get('rotate').set({ enable: true })

for (let gesture of gestures) {
  mc.on(gesture.event, (event) => {
    event.preventDefault()
    mcBox.textContent = gesture.event
  })
}

Source