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

Download Long Click/Tap Event Detection With jQuery – long_tap.js

By Posted on

This time I will share jQuery Plugin and tutorial about Long Click/Tap Event Detection With jQuery – long_tap.js, hope it will help you in programming stack.

File Size: 4.13 KB
Views Total: 5053
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

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).

view source
1 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
2         integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
3         crossorigin="anonymous">
4 </script>
5 <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:

view source
01 (() => {
02   $('.long-tap').longTap({
03     onStart: (event, self) => {
04       // do something
05     },
06     onSuccess: (event, self) => {
07       // do something
08     },
09     onStop: (event, self) => {
10       // do something
11     },
12     onClick: (event, $self) => {
13       // do something
14     },
15     onSelect: (event, $self) => {
16       // do something
17     },
18     onContext: (event, $self) => {
19       // do something
20     }
21   });
22 })();

3. Set the delay and timeout in milliseconds.

view source
1 $('.long-tap').longTap({
2  
3   // delay before timeeout start
4   onStartDelay: 100,
5  
6   // long tap time
7   timeout: 500,
8  
9 });

4. Enable/disable events.

view source
1 $('.long-tap').longTap({
2  
3   preventClick: true,
4   preventSelect: true,
5   preventContext: true
6  
7 });

5. Enable/disable quick select mode.

view source
1 $('.long-tap').longTap({
2  
3   enableQuickSelect: false
4  
5 });

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.

source : jquery.net

Related posts: