Long Click/Tap Event Detection With jQuery - long_tap.js

long_tap.js is a small yet useful jQuery plugin to detect and handle long click and long tap event on both touch and desktop devices. Typically used to do some awesome things as you long press on touch screens.

How to use it:

1. Insert the long_tap.js script after the latest version of jQuery JavaScript library (slim build).

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="long_tap.js"></script>

2. Call the function on the element where you want to detect the long press event and execute certain functions as follows:

(() => {
  $('.long-tap').longTap({
    onStart: (event, self) => {
      // do something
    },
    onSuccess: (event, self) => {
      // do something
    },
    onStop: (event, self) => {
      // do something
    },
    onClick: (event, $self) => {
      // do something
    },
    onSelect: (event, $self) => {
      // do something
    },
    onContext: (event, $self) => {
      // do something
    }
  });
})();

3. Set the delay and timeout in milliseconds.

$('.long-tap').longTap({

  // delay before timeeout start
  onStartDelay: 100,

  // long tap time
  timeout: 500,

});

4. Enable/disable events.

$('.long-tap').longTap({

  preventClick: true,
  preventSelect: true,
  preventContext: true

});

5. Enable/disable quick select mode.

$('.long-tap').longTap({

  enableQuickSelect: false

});

Change log:

2018-04-08

• Code refactor

2018-03-30

• Added more events

---

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