Article archivé de 2013. Conservé à titre d’archive ; la technologie est obsolète.

Capturer les clics simples, doubles, triples, longs et droits sur un même élément avec jQuery

2 min de lecture

Voici un petit extrait de code pour capturer les clics simples, doubles, triples, longs et droits sur un élément avec jQuery.

C’est en réalité un mélange de :

Pour l’utiliser, vous devez ajouter jQuery (http://jquery.com/) et le plugin jquery.longclick (https://github.com/pisi/Longclick) à votre page, puis vous pouvez utiliser le code ci-dessous pour capturer les clics :

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

Le code est sur GitHub : https://github.com/tx2z/jquery-click