type - Jquery hace doble clic y hace un solo clic por separado

input type button jquery

Question

¿Hay algo en jquery que me permita diferenciar entre comportamiento con doble clic y un solo clic?

Cuando enlace ambos elementos, solo se ejecuta el clic.

¿Hay alguna manera de esperar un tiempo antes de la ejecución del clic simple para ver si el usuario vuelve a hacer clic o no?

Gracias :)

Answer 1

Claro, enlace dos manejadores, uno para click y el otro para hacer dblclick . Cree una variable que se incremente en cada clic. luego se restablece después de un retraso establecido. Dentro de la función setTimeout puedes hacer algo ...

var DELAY = 2000,
    clicks = 0,
    timer = null;

$(''a'').bind({
    click: function(e) {
        clearTimeout(timer);

        timer = setTimeout(function() {
            clicks = 0;
        }, DELAY);

        if(clicks === 1) {
            alert(clicks);
             //do something here

            clicks = 0;
        }

        //Increment clicks
        clicks++;
    },
    dblclick: function(e) {
        e.preventDefault(); //don''t do anything
    }
});

Answer 2

Debajo está mi acercamiento simple al problema.

Función JQuery:

jQuery.fn.trackClicks = function () {
    if ($(this).attr("data-clicks") === undefined) $(this).attr("data-clicks", 0);

    var timer;
    $(this).click(function () {
        $(this).attr("data-clicks", parseInt($(this).attr("data-clicks")) + 1);

        if (timer) clearTimeout(timer);

        var item = $(this);
        timer = setTimeout(function() {
            item.attr("data-clicks", 0);
        }, 1000);
    });
}

Implementación:

$(function () {
    $("a").trackClicks();

    $("a").click(function () {
        if ($(this).attr("data-clicks") === "2") {
            // Double clicked
        }
    });
});

Inspeccione el elemento cliqueado en Firefox / Chrome para ver cómo los datos suben y bajan al hacer clic, ajuste el tiempo (1000) para que se ajuste.

Answer 3

Descubrí que la respuesta de John Strickler no hizo exactamente lo que esperaba. Una vez que la alerta se desencadena con un segundo clic dentro de la ventana de dos segundos, cada clic posterior activa otra alerta hasta que espere dos segundos antes de volver a hacer clic. Entonces, con el código de John, un triple clic actúa como dos clics dobles donde esperaría que actuara como un doble clic seguido de un solo clic.

He reelaborado su solución para funcionar de esta manera y fluir de una manera que mi mente pueda comprender mejor. Bajé la demora de 2000 a 700 para simular mejor lo que sentiría como una sensibilidad normal. Aquí está el violín: http://jsfiddle.net/KpCwN/4/ .

Gracias por la fundación, John. Espero que esta versión alternativa sea útil para otros.

var DELAY = 700, clicks = 0, timer = null;

$(function(){

    $("a").on("click", function(e){

        clicks++;  //count clicks

        if(clicks === 1) {

            timer = setTimeout(function() {

                alert("Single Click");  //perform single-click action    
                clicks = 0;             //after action performed, reset counter

            }, DELAY);

        } else {

            clearTimeout(timer);    //prevent single-click action
            alert("Double Click");  //perform double-click action
            clicks = 0;             //after action performed, reset counter
        }

    })
    .on("dblclick", function(e){
        e.preventDefault();  //cancel system double-click event
    });

});

Answer 4

Escribí un complemento de jQuery que también permite delegar los eventos de clic y dblclick

// jQuery plugin to bind both single and double click to objects
// parameter ''delegateSelector'' is optional and allow to delegate the events
// parameter ''dblclickWait'' is optional default is 300
(function($) {
$.fn.multipleClicks = function(delegateSelector, clickFun, dblclickFun, dblclickWait) {
    var obj;
    if (typeof(delegateSelector)===''function'' && typeof(clickFun)===''function'') {
        dblclickWait = dblclickFun; dblclickFun = clickFun; clickFun = delegateSelector; delegateSelector = null; // If ''delegateSelector'' is missing reorder arguments
    } else if (!(typeof(delegateSelector)===''string'' && typeof(clickFun)===''function'' && typeof(dblclickFun)===''function'')) {
        return false;
    }
    return $(this).each(function() {
        $(this).on(''click'', delegateSelector, function(event) {
            var self = this;
            clicks = ($(self).data(''clicks'') || 0)+1;
            $(self).data(''clicks'', clicks);
            if (clicks == 1) {
                setTimeout(function(){
                    if ($(self).data(''clicks'') == 1) {
                        clickFun.call(self, event); // Single click action
                    } else {
                        dblclickFun.call(self, event); // Double click action
                    }
                    $(self).data(''clicks'', 0);
                }, dblclickWait || 300);
            }
        });
    });
};
})(jQuery);

Answer 5

Esta solución funciona para mí

var DELAY = 250, clicks = 0, timer = null;

$(".fc-event").click(function(e) {
    if (timer == null) {
        timer = setTimeout(function() {
           clicks = 0;
            timer = null;
            // single click code
        }, DELAY);
    }

    if(clicks === 1) {
         clearTimeout(timer);
         timer = null;
         clicks = -1;
         // double click code
    }
    clicks++;
});

Answer 6

Este es un método que puedes hacer usando el JavaScript básico, que funciona para mí:

var v_Result;
function OneClick() {
    v_Result = false;
    window.setTimeout(OneClick_Nei, 500)
    function OneClick_Nei() {
        if (v_Result != false) return;
        alert("single click");
    }
}
function TwoClick() {
    v_Result = true;
    alert("double click");
}

Answer 7

Hice algunos cambios a las respuestas anteriores, que todavía funciona muy bien: http://jsfiddle.net/arondraper/R8cDR/

Answer 8

Igual que la respuesta anterior, pero permite triple clic. (Demora 500) http://jsfiddle.net/luenwarneke/rV78Y/1/

    var DELAY = 500,
    clicks = 0,
    timer = null;

$(document).ready(function() {
    $("a")
    .on("click", function(e){
        clicks++;  //count clicks
        timer = setTimeout(function() {
        if(clicks === 1) {
           alert(''Single Click''); //perform single-click action
        } else if(clicks === 2) {
           alert(''Double Click''); //perform single-click action
        } else if(clicks >= 3) {
           alert(''Triple Click''); //perform Triple-click action
        }
         clearTimeout(timer);
         clicks = 0;  //after action performed, reset counter
       }, DELAY);
    })
    .on("dblclick", function(e){
        e.preventDefault();  //cancel system double-click event
    });
});

Answer 9

La solución proporcionada por "Nott Responding" parece disparar ambos eventos, haga clic y haga doble clic al hacer doble clic. Sin embargo, creo que apunta en la dirección correcta.

Hice un pequeño cambio, este es el resultado:

$("#clickMe").click(function (e) {
    var $this = $(this);
    if ($this.hasClass(''clicked'')){
        $this.removeClass(''clicked''); 
        alert("Double click");
        //here is your code for double click
    }else{
        $this.addClass(''clicked'');
        setTimeout(function() { 
            if ($this.hasClass(''clicked'')){
                $this.removeClass(''clicked''); 
                alert("Just one click!");
                //your code for single click              
            }
        }, 500);          
    }
});

Intentalo

http://jsfiddle.net/calterras/xmmo3esg/

Answer 10

Mira el siguiente código

$("#clickMe").click(function (e) {
    var $this = $(this);
    if ($this.hasClass(''clicked'')){
        alert("Double click");
        //here is your code for double click
        return;
    }else{
         $this.addClass(''clicked'');
        //your code for single click
         setTimeout(function() { 
                 $this.removeClass(''clicked''); },500);
    }//end of else
});

La demo va aquí http://jsfiddle.net/cB484/

Answer 11

Probablemente pueda escribir su propia implementación personalizada de clic / clicclick para que espere un clic adicional. No veo nada en las funciones centrales de jQuery que te ayuden a lograr esto.

Cita de .dblclick() en el sitio jQuery

No es aconsejable vincular los controladores a los eventos de clic y clic doble para el mismo elemento. La secuencia de eventos activados varía de un navegador a otro, y algunos reciben dos eventos de clic antes del dblclick y otros solo uno. La sensibilidad de doble clic (el tiempo máximo entre clics que se detecta con un doble clic) puede variar según el sistema operativo y el navegador, y a menudo es configurable por el usuario.

Answer 12

Estoy implementando esta solución simple, http://jsfiddle.net/533135/VHkLR/5/
código HTML

<p>Click on this paragraph.</p>
<b> </b>

código de script

var dbclick=false;    
$("p").click(function(){
setTimeout(function(){
if(dbclick ==false){
$("b").html("clicked")
}

},200)

}).dblclick(function(){
dbclick = true
$("b").html("dbclicked")
setTimeout(function(){
dbclick = false


},300)
});

no es muy laggy

Answer 13

(function($){

$.click2 = function (elm, o){
    this.ao = o;
    var DELAY = 700, clicks = 0;
    var timer = null;
    var self = this;

    $(elm).on(''click'', function(e){
        clicks++;
        if(clicks === 1){
            timer = setTimeout(function(){
                self.ao.click(e);
            }, DELAY);
        } else {
            clearTimeout(timer);
            self.ao.dblclick(e);
        }
    }).on(''dblclick'', function(e){
        e.preventDefault();
    });

};

$.click2.defaults = { click: function(e){}, dblclick: function(e){} };

$.fn.click2 = function(o){
    o = $.extend({},$.click2.defaults, o);
    this.each(function(){ new $.click2(this, o); });
    return this;
};

})(jQuery);

Y finalmente usamos como.

$("a").click2({
    click : function(e){
        var cid = $(this).data(''cid'');
        console.log("Click : "+cid);
    },
    dblclick : function(e){
        var cid = $(this).data(''cid'');
        console.log("Double Click : "+cid);
    }
});

Answer 14

var singleClickTimer = 0; //define a var to hold timer event in parent scope
jqueryElem.click(function(e){ //using jquery click handler
    if (e.detail == 1) { //ensure this is the first click
        singleClickTimer = setTimeout(function(){ //create a timer
            alert(''single''); //run your single click code
        },250); //250 or 1/4th second is about right
    }
});

jqueryElem.dblclick(function(e){ //using jquery dblclick handler
    clearTimeout(singleClickTimer); //cancel the single click
    alert(''double''); //run your double click code
});