jquery-taphold

A taphold event for jQuery.

Demo

To trigger a taphold event you need to click/tap an element and hold it for 0.5s (default delay). If released before the delay passed then a normal click event is triggered instead. If dragged or moved out of the element then no event is triggered.

Note: for touch devices taphold behaves pretty much like contextmenu event (excluging customizable delay value).

Highlights

• Support mouse, touch, pen input, alone and in combinations
• Make use of Pointer Events, otherwise fall back to their Mouse / Touch counterparts
• Provide proper bubbling of events
• Delegated events are also supported
• taphold delay is customizable

Usage

$('#element').on('taphold', function () {
  // actions
});

You can combine the event with a click event:

$('#element')
  .on('taphold', function () {
    // taphold actions
  })
  .on('click', function () {
    // normal actions
  });

Delegated events are also supported:

$('#element').on('taphold', '<selector>', function () {
  // triggers on descendants of #element that satisfy specified selector
});

Default options are accessible in $.event.special.taphold.defaults object:

{
  delay: 500
}

Instead of modifying defaults it's possible to pass options directly:

$('#element')
  .on('taphold', {delay: 2000}, function() {
    // to trigger after 2s
  });