web-long-press v1.0.3

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