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

Category: Javascript | April 27, 2024
4 Comments
Demo Download
Author:john-doherty
Views Total:793 views
Official Page:Go to website
Last Update:April 27, 2024
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:

v2.5.0 (04/27/2024)

  • Bugfix

v2.4.6 (02/25/2023)

  • Bugfix

v2.4.4 (05/25/2021)

  • update

v2.4.2 (11/16/2020)

  • suppress click event bug

v2.4.1 (11/15/2020)

  • Click event no longer fires after long-press event

v2.1.0 (09/23/2019)

  • Added possibility to forward clientX and clientY values

v2.0.1 (09/08/2019)

  • removed disable context menu, causes problems on android devices

v2.0.0 (08/29/2019)

  • replaced setTimeout with requestAnimationFrame for more accurate timing

v1.0.7 (08/28/2019)

  • disabled logging

v1.0.6 (07/02/2019)

  • refactored code and added useCapture=true for events

03/21/2018

  • fixed IIFE Webpack bug

02/02/2018

  • renamed to long-press-event

09/14/2018

  • v1.0.2

See Also:

You Might Be Interested In:

4 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 ↓
  3. satya

    Thank you boss you did a really great job! but after using long press touchend event not working i need to do some action on touch end also after using long press.

    Reply ↓
  4. Brian

    Excellent work! The only issue I’m finding is that it fires when scrolling the page and the “press” to start the scroll initiates on the element. (In my case I had the event bound to the whole document)

    Reply ↓

Leave a Reply