Handle Hold Events Across All Devices - jQuery LongPress

jquery.longpress.js is a lightweight jQuery plugin that handles long press events across desktop and mobile devices.

It provides a unified API for detecting when users hold down buttons or elements—something not natively available in standard web events.

Features:

• Configurable hold durations.
• Maximum time limits.
• Visual feedback through progress bars.
• Customizable callback functions.

Use Cases:

• "Hold to Delete": Instead of a simple click, requiring a short hold before deleting something (like an email or a message) helps prevent accidental deletions. This is critical in mobile apps.
• Progressive Action Triggers: Imagine a video player where holding down the fast-forward button gradually increases the playback speed. The longer the hold, the faster it goes. The plugin's onHold callback is perfect for this.
• Contextual Menu Alternatives: On touch devices, a long press can serve a similar function to a right-click, revealing additional options. This avoids cluttering the UI with extra buttons.
• Form Input Control:  You can use this for a volume control slider. A tap would adjust the volume slightly; a long press would smoothly ramp it up or down.
• E-commerce Quick Actions: Implement "Add to Cart" with quantity scaling – hold duration increases item count. Use `onHoldEnd` to finalize the transaction.

How to use it:

1. Download the jquery.longpress.js file and include it after jQuery:

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.longpress.js"></script>

2. Attach the longPress function to your clickable elements (like buttons). This will activate long press detection with default settings (500ms hold time).

$(function(){ 
  $('button').longPress();
});

3. Available options and callbacks to config the longpress behaviors.

• holdTime: (Number, default: 500) Delay in milliseconds before the hold is considered started.
• maxHoldTime: (Number | null, default: null) Maximum duration in milliseconds. If null, there's no limit.
• holdClass: (String, default: 'holding') CSS class added to the element while holding.
• progressBar: (Boolean, default: false) Enables the visual progress bar.
• progressBarClass: (string, default: 'button-hold-progress') CSS class for progress bar.
• throttleProgress: (number, default: '16') Throttle interval for progress updates (ms)
• touchMoveThreshold: (number, default: '10') Movement threshold to cancel hold (px)
• preventContextMenu: (Boolean, default: true) Prevent context menu on right-click
• onHoldStart: (Function, default: null) Called when the hold starts (after holdTime).
• onHold: (Function, default: null) Called repeatedly during the hold. Receives event, progress percentage, and duration as arguments.
• onHoldEnd: (Function, default: null) Called when the hold ends (either by release or maxHoldTime). Receives event and duration.
• onMaxHold: (Function, default: null) Called when maxHoldTime is reached.

$('button').longPress({
  holdTime: 500,
  maxHoldTime: null,
  holdClass: "holding",
  onHoldStart: () => {},
  onHold: () => {},
  onHoldEnd: () => {},
  onMaxHold: () => {},
  progressBar: false,
  progressBarClass: "button-hold-progress",
  throttleProgress: 16,
  touchMoveThreshold: 10,
  preventContextMenu: true
});

4. Remove all event handlers and destroy the plugin. This is important for preventing memory leaks, especially in single-page applications where elements may be created and destroyed dynamically.

$('button').longPressDestroy();

How it works:

The plugin attaches event listeners for both mousedown/touchstart and mouseup/touchend/touchcancel events to track when users start and stop pressing elements.

When a press begins, the plugin starts a timer using setTimeout() to wait for the configured holdTime before triggering the hold state.

Rather than using a fixed interval for updates, it calculates the current progress as a percentage of either the maxHoldTime (if specified) or a default scaling factor. This approach provides smooth visual feedback while maintaining performance:

const calculateProgress = (currentTime) => {
  if (settings.maxHoldTime) {
    return Math.min(((currentTime - holdStartTime) / settings.maxHoldTime) * 100, 100);
  }
  return Math.min(((currentTime - holdStartTime) / 100) * 2, 100);
};

For the progress bar visualization, the plugin dynamically creates and appends a div element to the target, then updates its width based on the current hold percentage.

The plugin also implements smart event handling by preventing context menus (which would interrupt the long press experience on mobile devices) and adding CSS to prevent text selection during holding operations.

See Also:

• long-press-event: Handle Long Press/Tap Event In Vanilla JavaScript
• web-long-press: A JavaScript library to simulate the Long Press Event on desktop and mobile devices.

Changelog:

v2.0.1 (2025-05-16)

• Bugfix

v2.0.0 (2025-03-19)

• Added more options

---

This awesome jQuery plugin is developed by salarizadi. For more Advanced Usages, please check the demo page or visit the official website.