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

Category: Javascript | June 16, 2020
Author: MudOnTire
Views Total: 60 views
Official Page: Go to website
Last Update: June 16, 2020
License: MIT

Preview:

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

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:

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
});

You Might Be Interested In:


Leave a Reply