Vue Js Long Press Directive

Learn how to define long press directive in Vue Js

Created on Sep 11, 2021

•

160 views

A simple directive to execute a function when the element is long-pressed.

<div id="app">
  <button v-longpress="showOptions">Hold me for a while</button>
</div>

The directive will be as follows.

<script>
const PRESS_TIMEOUT = 1000;

Vue.directive("longpress", {
  bind: function (el, { value }, vNode) {
    if (typeof value !== "function") {
      console.warn(`Expect a function, got ${value}`);
      return;
    }

    let pressTimer = null;

    const start = e => {
      if (e.type === "click" && e.button !== 0) {
        return;
      }

      if (pressTimer === null) {
        pressTimer = setTimeout(() => value(e), PRESS_TIMEOUT);
      }
    }

    const cancel = () => {
      if (pressTimer !== null) {
        clearTimeout(pressTimer);
        pressTimer = null;
      }
    }

    ;["mousedown", "touchstart"].forEach(e => el.addEventListener(e, start));
    ;["click", "mouseout", "touchend", "touchcancel"].forEach(e => el.addEventListener(e, cancel));
  }
})
</script>

Vue Js Snippets

new

If you like our tutorial, do make sure to support us by being our Patreon or buy us some coffee ☕️

Patreon