Artículo archivado de 2013. Se conserva como referencia; la tecnología está desfasada.

Capturar clics simples, dobles, triples, largos y con el botón derecho en el mismo elemento con jQuery

2 min de lectura

Este es un fragmento de código sencillo para capturar clics simples, dobles, triples, largos y con el botón derecho en un elemento con jQuery.

En realidad es una mezcla de:

Para usarlo tienes que añadir jQuery (http://jquery.com/) y el plugin jquery.longclick (https://github.com/pisi/Longclick) a tu página, y después puedes usar el código siguiente para capturar los 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);

El código está en GitHub: https://github.com/tx2z/jquery-click