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

This site uses Akismet to reduce spam. Learn how your comment data is processed.