Implementing Long‑Press Functionality in Vue with JavaScript

The article demonstrates how to add a long‑press capability to a Vue component, allowing a function to be executed when a user holds a button for a specified duration.

To achieve this, the mousedown event starts a timer and the mouseup (or click) event cancels it; if the timer reaches the threshold (e.g., 2 seconds), the associated function runs.

Implementation steps include defining a variable to store the timer, creating a start function that sets a setTimeout, and a cancel function that clears the timeout.

Key code snippets:

let pressTimer = null;

let start = (e) => {
  if (e.type === 'click' && e.button !== 0) { return; }
  if (pressTimer === null) {
    pressTimer = setTimeout(() => {
      // execute task !!!
    }, 1000);
  }
};

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

These functions are attached to the target element:

el.addEventListener("mousedown", start);
el.addEventListener("click", cancel);
el.addEventListener("mouseout", cancel);

For Vue integration, a global custom directive v-longpress is defined. Inside the bind hook, the same timer logic is set up, a handler function invokes the user‑provided callback, and additional listeners for touchstart, touchend, and touchcancel are added to support touch devices.

Vue.directive('longpress', {
  bind: function(el, binding, vNode) {
    if (typeof binding.value !== 'function') {
      const compName = vNode.context.name;
      let warn = `[longpress:] provided expression '${binding.expression}' is not a function, but has to be `;
      if (compName) { warn += `Found in component '${compName}' `; }
      console.warn(warn);
    }
    let pressTimer = null;
    let start = (e) => { /* timer start logic */ };
    let cancel = (e) => { /* timer cancel logic */ };
    const handler = (e) => { binding.value(e); };
    el.addEventListener('mousedown', start);
    el.addEventListener('touchstart', start);
    el.addEventListener('click', cancel);
    el.addEventListener('mouseout', cancel);
    el.addEventListener('touchend', cancel);
    el.addEventListener('touchcancel', cancel);
  }
});

Finally, the directive validates that the bound expression is a function and logs a warning if not, ensuring developers receive clear feedback during integration.