Jquery bind doppio clic e singolo clic separatamente

C'è qualcosa in jquery che mi consentirebbe di distinguere tra comportamento al doppio clic e clic singolo?

Quando associo entrambi allo stesso elemento, viene eseguito solo il singolo clic.

Esiste un modo per attendere un po 'di tempo prima dell'esecuzione del singolo clic per vedere se l'utente fa nuovamente clic o meno?

Grazie :)

Ho scoperto che la risposta di John Strickler non ha fatto esattamente quello che mi aspettavo. Una volta che l'avviso viene attivato da un secondo clic all'interno della finestra di due secondi, ogni clic successivo attiva un altro avviso finché non si attendono due secondi prima di fare nuovamente clic. Quindi, con il codice di John, un triplo clic agisce come due doppi clic dove mi aspetto che agisca come un doppio clic seguito da un singolo clic.

Ho rielaborato la sua soluzione affinché funzioni in questo modo e fluisca in un modo che la mia mente possa comprendere meglio. Ho abbassato il ritardo da 2000 a 700 per simulare meglio quella che avrei percepito come una sensibilità normale. Ecco il violino: http://jsfiddle.net/KpCwN/4/ .

Grazie per la fondazione, John. Spero che questa versione alternativa sia utile ad altri.

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

});

La soluzione fornita da "Nott Responding" sembra attivare entrambi gli eventi, clic e doppio clic quando si fa doppio clic. Tuttavia penso che punti nella giusta direzione.

Ho fatto una piccola modifica, questo è il risultato:

$("#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);          
    }
});

Provalo

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

Certo, associa due gestori, uno a clicke l'altro a dblclick. Crea una variabile che aumenta ad ogni clic. quindi si ripristina dopo un ritardo impostato. All'interno della funzione setTimeout puoi fare qualcosa ...

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

Probabilmente potresti scrivere la tua implementazione personalizzata di click / dblclick in modo che attenda un clic in più. Non vedo nulla nelle funzioni jQuery principali che ti aiutino a raggiungere questo obiettivo.

Citazione da .dblclick () sul sito jQuery

Non è consigliabile associare i gestori agli eventi click e dblclick per lo stesso elemento. La sequenza degli eventi attivati ​​varia da browser a browser, alcuni ricevono due eventi di clic prima del doppio clic e altri solo uno. La sensibilità del doppio clic (il tempo massimo tra i clic rilevato come doppio clic) può variare in base al sistema operativo e al browser ed è spesso configurabile dall'utente.

Guarda il codice seguente

$("#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 qui http://jsfiddle.net/cB484/

Ho scritto un plugin jQuery che permette anche di delegare gli eventi click e 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);

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

sto implementando questa semplice soluzione, http://jsfiddle.net/533135/VHkLR/5/
codice html

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

codice di 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)
});

non è molto lento

Questa soluzione funziona per me

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

Ho apportato alcune modifiche alle risposte sopra qui che funzionano ancora alla grande: http://jsfiddle.net/arondraper/R8cDR/

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

E infine usiamo come.

$("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);
    }
});

Come la risposta precedente, ma consente il triplo clic. (Ritardo 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
    });
});

Questo è un metodo che puoi utilizzare utilizzando JavaScript di base, che funziona per me:

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

Di seguito è riportato il mio semplice approccio al problema.

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

Implementazione:

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

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

Ispeziona l'elemento cliccato in Firefox / Chrome per vedere i clic sui dati che vanno su e giù mentre fai clic, regola il tempo (1000) per adattarlo.