Capture single, double, triple, long and right clicks in the same element with jQuery
This is a simple code snippet to capture single, double, triple, long and right clicks in an element with jQuery.
This is really a mix of:
To use it you have to add jQuery (http://jquery.com/) and the plugin jquery.longclick (https://github.com/pisi/Longclick) to your page, and then you can use the code below to capture clicks:
1(function($) {
2
3 // Usefull variables
4 var clicks = 0;
5 var longclick = false;
6
7 // Change the long click duration (in ms):
8 //jQuery.longclick.duration = 500;
9
10 $(document).ready(function() {
11 // Event click handlers
12 $('a').bind({
13 click: function(){ // Left (normal) click
14 if (longclick == true) {
15 longclick = false;
16 }else {
17 clicks++;
18 if (clicks == 1) {
19 setTimeout(function() {
20 if (clicks == 1) { // One click
21 $('.message').html('click');
22 } else if (clicks == 2) { // Double click
23 $('.message').html('dblclick');
24 } else { // Triple click
25 $('.message').html('tripleclick');
26 }
27 clicks = 0;
28 }, 500);
29 }
30 }
31 },
32 contextmenu: function(){ // Right click
33 $('.message').html('left-click');
34 return false; // The retun false avoid show the context menu
35 },
36 longclick: function(){ // Long click
37 $('.message').html('long click');
38 longclick = true; // Stop the "normal" click to execute
39 }
40 });
41 });
42 })(window.jQuery);The code is on GitHub: https://github.com/tx2z/jquery-click