Click/Tap And Hold Event Handler - jQuery Taphold

The Taphold library provides a tap and hold event listener which will be fired when an element is clicked/tapped/pressed and held for 0.5s.

How to use it:

1. Download and load the taphold.js script after jQuery.

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

2. Attach the tap and hold event handlers to the targer element and done.

<div id="button"></div>

$(function(){
  $('#button').on('taphold', function () {
    // do something here
  });
});

3. Combine the tap and hold event with click event. It is useful to trigger a normal click event when the button is released before the delay.

$(function(){
  $('#button').on('taphold', function () {
    // do something here
  })
  .on('click', function () {
    // do something here
  });
});

4. The plugin also supports jQuery event delegation which allows you to attach the click and tap event to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

$('#button').on('taphold', 'p', function () {
  // do something here
});

5. Overide the default delay between hold and click events. Default: 500ms (0.5s).

$('#element').on('taphold', {
  delay: 2000
},function () {
  // do something here
});

6. Prevent the default context menu event on mobile devices. Default: false.

$('#element').on('taphold', {
  preventMenu: true
},function () {
  // do something here
});

Changelog:

2019-12-23

• fixed click-preventing
• enhanced log

2019-12-22

• fix click-preventing

2019-12-21

• JS update

2019-12-18

• fix click-preventing

2019-12-17

• prevent click after taphold in some cases

---

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