Mobile Longpress Directive for Vue

longpress.js

import debounce from 'lodash/debounce';
import Vue from 'vue';

// mobile longPress. usage: <div v-longpress="callbackFunction" /> you can specify an optional delay with v-longpress:1000="callbackFunction" (default is 300ms).
Vue.directive('longpress', {
  bind(el, binding) {
    let longPressTimeout = null;
    el.addEventListener('touchstart', (e) => {
      longPressTimeout = window.setTimeout(/*callback*/ binding.value, /*delay*/ binding.arg || 300);
    });
    el.addEventListener('touchend', () => {
      window.clearTimeout(longPressTimeout);
    });
    el.addEventListener('touchcancel', () => {
      window.clearTimeout(longPressTimeout);
    });
    el.addEventListener(
      'touchmove',
      debounce(
        () => {
          window.clearTimeout(longPressTimeout);
        },
        100,
        { maxWait: 100, leading: true, trailing: true }
      )
    );
  },
});