Capture simple, double, triple, long and right clicks in the same element with jQuery
This is a simple code snippet to capture simple, 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 bellow to capture clicks:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
| (function($) {
// Usefull variables
var clicks = 0;
var longclick = false;
// Change the long click duration (in ms):
//jQuery.longclick.duration = 500;
$(document).ready(function() {
// Event click handlers
$('a').bind({
click: function(){ // Left (normal) click
if (longclick == true) {
longclick = false;
}else {
clicks++;
if (clicks == 1) {
setTimeout(function() {
if (clicks == 1) { // One click
$('.message').html('click');
} else if (clicks == 2) { // Double click
$('.message').html('dblclick');
} else { // Triple click
$('.message').html('tripleclick');
}
clicks = 0;
}, 500);
}
}
},
contextmenu: function(){ // Right click
$('.message').html('left-click');
return false; // The retun false avoid show the context menu
},
longclick: function(){ // Long click
$('.message').html('long click');
longclick = true; // Stop the "normal" click to execute
}
});
});
})(window.jQuery);
|
The code is in Github: https://github.com/tx2z/jquery-click
You can view it working here: http://www.caosmental.com/webs/jquery-click/