jesus.perezpaz.es

Captura clicks simple, doble, triple, largo y click derecho en un elemento con jquery

Esto es un recorte de código que sirve para capturar clicks simples, dobles, triples, largos y clicks con el botón derecho en un elemento, usando jquery.

Realmente 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. Una vez hecho puedes añadir el código siguiente para capturar los diferentes clicks:

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

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

Puedes verlo funcionando aquí: http://www.caosmental.com/webs/jquery-click/

Ir a la portada → ← Volver artás

Comentarios

0 comentarios

Aún no hay comentatios. ¿Por qué no añades uno?

Dejar un comentario

Tu dirección de email no será publicada