Implement Accelerated Mouse/Touch Hold Events with jQuery

The jquery-event-holdrepeat jQuery plugin introduces a new "holdrepeat" event that will be triggered when an element is pressed and held for a specified duration.

Unlike standard JavaScript & jQuery click events, this plugin distinguishes between quick clicks and deliberate holds, then fires events repeatedly at configurable intervals during the hold duration.

Features:

• Customizable initial delay before the first holdrepeat event triggers
• Configurable repeat interval between holdrepeat events
• Optional acceleration to dynamically reduce the interval over time
• Support for both mouse and touch events
• Works with both direct event binding and event delegation
• Multiple event types (holdstart, holdrepeat, holdstop, holdrepeathalt)
• Detailed event object properties for precise control

Use Cases:

• Numeric Input Controls: Create increment/decrement buttons for number inputs where holding the button continuously changes the value at an increasing rate - perfect for quantity selectors in e-commerce applications.
• Scrolling Interfaces: Implement manual carousel controls where holding a button scrolls through items with acceleration, providing a natural feeling of momentum.
• Game Controls: Develop browser-based games requiring continuous input while a button is held down, with precise control over input frequency.
• Media Players: Build custom media controls for fast-forward/rewind functionality where speed increases the longer a button is held.

How to use it:

1. Download the jquery-event-holdrepeat.js plugin and after it after the latest jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery-event-holdrepeat.js"></script>

2. Bind the holdrepeat event to an element. This event object passed to your callback function contains useful properties:

• originalEvent: The original mouse or touch event.
• iteration: The current iteration number (starts at 0).
• startTime: Timestamp when the hold started.
• currentInterval: The current interval between events (in milliseconds).
• duration: (Only on 'holdstop') The total duration of the hold.
• accelerating: Boolean, if the acceleration is active.
• haltReason: (Only on 'holdrepeathalt') Reason for the halt.
• haltTime: (Only on 'holdrepeathalt') Timestamp of the halt.

// Basic
$('#element').on('holdrepeat', function(e) {
  console.log(`holdrepeat iteration ${e.iteration} at ${e.currentInterval}ms`);
});

// Event delegation
// Useful for dynamically added elements
$(document).on('holdrepeat', '.dynamic-element', function(e) {
  // do something
});

3. The plugin also provides additional 'hold' events you can listen for:

• holdstart: Triggered after the initial delay.
• holdstop: Triggered when the hold ends (mouse up, touch end).
• holdrepeathalt: Triggered if maximum repetitions are reache

$('#element').on('holdstart', function(e) {
  // do something
});

$('#element').on('holdstop', function(e) {
  // do something
});

$('#element').on('holdrepeathalt', function(e) {
  // do something
});

4. Be mindful of the repeatInterval and acceleration settings. Extremely short intervals or aggressive acceleration can lead to a high number of events, potentially impacting performance. I've found that starting with a slightly longer interval and moderate acceleration provides the best user experience. Also, use maxIterationsPerHold to avoid infinite loops.

Alternatives:

jQuery Long Press

jQuery Long Press is a simpler alternative that fires a single event after a button is held for a specific duration. Unlike jquery-event-holdrepeat, it doesn't provide repeated events or acceleration. It's suitable for simpler use cases where you only need to detect if a user held a button, not for continuous interaction.

Changelog:

2025-03-29

• Update JS

---

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