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

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.

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
    },
    onReject: (event, self) => {
      // do something
    },
    onEnd: (event, self) => {
      // do something
    }
  });
})();

3. Set the delay and timeout in milliseconds.

$('.long-tap').longTap({
  
  onStartDelay: 100,
  onEndDelay: 100,
  timeout: 500,
});

4. Enable/disable click and tap events you want to track.

$('.long-tap').longTap({
  mouseEvents: true,
  tapEvents: true
});

5. Enable/disable quick select mode.

$('.long-tap').longTap({
  enableQuickSelect: false
});

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

  • Publication date: 30.03.2018
  • Source