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

Category: Javascript | June 16, 2020
Views Total:229 views
Official Page:Go to website
Last Update:June 16, 2020


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


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:

Install & Download:

# Yarn
$ yarn add web-long-pressvue-autosize-input
$ 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(, '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

You Might Be Interested In:

Leave a Reply