A tiny long-press event handler for web pages with pure vanilla javascript. Support pc's mouse click and mobile's touch events.

Install

npm install --save web-long-press

or

yarn add web-long-press

Usage

Html:

<button class="long-press">Press Me Long..</button>

Javascript:

import LongPress from "web-long-press";

new LongPress({
  triggerClass: 'long-press', // default
  pressDelay: 800, // default
  eventName: 'longpress' // default
  bubbles: true // default
});

That's all. And when you press the button longer than pressDelay the longpress event will fire and bubbles up if you set bubbles to true.

Then we can handle the longpress event like this:

document.addEventListener("longpress", (e) => {
  console.log(e.target, 'has been long pressed..');
});

Multiple instances

We can have multiple LongPress instances to handle different long presses.

Html:

<button class="longpress-500">LongPress for 0.5s</button>
<button class="longpress-1000">LongPress for 1s</button>

Javascript:

new LongPress({
  triggerClass: 'longpress-500',
  pressDelay: 500,
  eventName: 'longpress500'
});

new LongPress({
  triggerClass: 'longpress-1000',
  pressDelay: 1000,
  eventName: 'longpress1000'
});

document.addEventListener("longpress500", (e) => {
  console.log(e.target, 'has been long pressed for 0.5ms');
});

document.addEventListener("longpress1000", (e) => {
  console.log(e.target, 'has been long pressed for 1s');
});

API

Options

name | type | description | default value | -----|------|-------------|---------------| triggerClass | string | Class for target elements to be long pressed | "long-press" pressDelay | number | The milliseconds a press should take to trigger the long-press event | 800 eventName | string | The custom event name for the long-press event | "longpress" bubbles | boolean | Should the long-press event bubbles up or not | true