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

Category: Javascript | March 21, 2019
Author: john-doherty
Views Total: 3,516
Official Page: Go to website
Last Update: March 21, 2019
License: MIT

Preview:

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

Description:

long-press.js is a small JavaScript library which detects and handles the long press/tap event on a specific DOM (or the whole document). Supports both desktop and mobile.

How to use it:

Import the long-press.js library into your html document.

<script src="dist/long-press.min.js"></script>

Attach the long press/tap event handler to a specific element.

var el = document.getElementById('demo');

el.addEventListener('long-press', function(e) {
  // do something
});

Or attach the event handler to the whole document.

document.addEventListener('long-press', function(e) {
  // do something
});

Customize the time delay in milliseconds. Default: 1.5s.

<div id="demo" data-long-press-delay="500">Press and hold me for .5s</div>

Changelog:

03/21/2018

  • fixed IIFE Webpack bug

02/02/2018

  • renamed to long-press-event

09/14/2018

  • v1.0.2

You Might Be Interested In:


2 thoughts on “Handle Long Press/Tap Event In JavaScript – long-press-event

  1. warp9pnt9

    I would not recommend this at all (unless issues fixed) and indeed the author of the article obviously has not even run the demo, because both the demo and library code are broken in several ways and fairly unusable as-is. Long press events are being fired for pinch-zoom, in and out, with or without scrolling, and not being fired above 500ms (not yet tested in fine increments between 501-999ms to identify precise delay, but 500ms works and 1000ms does not) as the (Chrome-based Android mobile) browser interprets that as a text-selection. Also, the library cancels the long press event with even 1 pixel of movement, which is potentially very horrible for accessibility by elderly, disabled, or even usability in general by kids, people on trains, people walking, etc. There does need to be a configurable tolerance based upon screen resolution, such that movement within 5% (for the sake of argument) would not be considered as a drag or gesture. Old behavior would thus be included if using a 0% threshhold. However, it may remain problematic to distinguish between a precision drag (or scroll) of an element (i.e. gross-motor-control drag/scroll at the beginning to get the element near the desired position then to initiate a second drag/scroll with fine-motor-control to more precisely position the element). Further testing and experimentation is needed upon a wider array of browsers (Chrome/Chromium is not the end-all be-all of browsers despite what Google thinks) and mobile devices as well as touch screen laptops. A formal code testing library may be helpful for catching blatant bugs but it can never compare with actual device and browser testing for observing and identifying causes of the plethora of esoteric bugs that can only manifest in situ.

    Reply

Leave a Reply