Touch-enabled Long Press Event Handler – web-long-press

Preview:

Description:

A JavaScript library to simulate the Long Press Event on desktop and mobile devices.

It allows the developer to register a custom long-press event which could be fired when the user press/tap and hold on an element for a certain time.

See Also:

• Handle Long Press/Tap Event In JavaScript – long-press-event

Install & Download:

# Yarn
$ yarn add web-long-pressvue-autosize-input
# NPM
$ npm install web-long-press --save

How to use it:

1. Import the web-long-press as a module or directly load the longpress.js script in the document.

// as an ES module
import LongPress from "web-long-press";
// or
<script src="./longpress.js"></script>

2. Initialize the LongPress on an element and register a custom event as follows:

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

new LongPress({
    triggerClass: 'long-press',
    eventName: 'longpress-event'
});

3. Trigger an event when you press and hold for 800ms.

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

4. Override the default long press delay in milliseconds. Default: 800.

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

5. Determine whether the long-press event should bubble up or not. Default: true.

new LongPress({
    triggerClass: 'long-press',
    eventName: 'longpress-event',
    bubbles: false
});