Jquery bind double clic et simple clic séparément

Y a-t-il quelque chose dans jquery qui me permettrait de faire la différence entre le comportement au double clic et au simple clic?

Lorsque je lie les deux au même élément, seul le simple clic est exécuté.

Existe-t-il un moyen d'attendre un certain temps avant l'exécution du simple clic pour voir si l'utilisateur clique à nouveau ou non?

Merci :)

J'ai trouvé que la réponse de John Strickler ne répondait pas tout à fait à mes attentes. Une fois l'alerte déclenchée par un deuxième clic dans la fenêtre de deux secondes, chaque clic suivant déclenche une autre alerte jusqu'à ce que vous attendiez deux secondes avant de cliquer à nouveau. Donc, avec le code de John, un triple clic agit comme deux doubles clics où je m'attendrais à ce qu'il agisse comme un double clic suivi d'un simple clic.

J'ai retravaillé sa solution pour qu'elle fonctionne de cette manière et qu'elle coule d'une manière que mon esprit puisse mieux comprendre. J'ai baissé le délai de 2000 à 700 pour mieux simuler ce que je ressentirais comme une sensibilité normale. Voici le violon: http://jsfiddle.net/KpCwN/4/ .

Merci pour la fondation, John. J'espère que cette version alternative sera utile aux autres.

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 solution donnée par "Nott Responding" semble déclencher les deux événements, click et dblclick lors d'un double clic. Cependant, je pense que cela va dans la bonne direction.

J'ai fait un petit changement, voici le résultat:

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

Essayez-le

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

Bien sûr, liez deux gestionnaires, l'un à clicket l'autre à dblclick. Créez une variable qui s'incrémente à chaque clic. puis se réinitialise après un délai défini. Dans la fonction setTimeout, vous pouvez faire quelque chose ...

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

Vous pourriez probablement écrire votre propre implémentation personnalisée de click / dblclick pour qu'elle attende un clic supplémentaire. Je ne vois rien dans les fonctions de base de jQuery qui vous aiderait à atteindre cet objectif.

Citation de .dblclick () sur le site jQuery

Il est déconseillé de lier les gestionnaires aux événements click et dblclick pour le même élément. La séquence des événements déclenchés varie d'un navigateur à l'autre, certains recevant deux événements de clic avant le dblclick et d'autres un seul. La sensibilité du double-clic (temps maximum entre les clics détecté comme un double-clic) peut varier selon le système d'exploitation et le navigateur, et est souvent configurable par l'utilisateur.

Regardez le code suivant

$("#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 démo va ici http://jsfiddle.net/cB484/

J'ai écrit un plugin jQuery qui permet également de déléguer les événements click et 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
});

J'implémente cette solution simple, http://jsfiddle.net/533135/VHkLR/5/
code html

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

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

ce n'est pas très lent

Cette solution fonctionne pour moi

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

J'ai apporté quelques modifications aux réponses ci-dessus ici qui fonctionnent toujours très bien: 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);

Et enfin, nous utilisons comme.

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

Identique à la réponse ci-dessus mais permet un triple clic. (Délai 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
    });
});

C'est une méthode que vous pouvez utiliser en utilisant le JavaScript de base, qui fonctionne pour moi:

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

Voici mon approche simple du problème.

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

La mise en oeuvre:

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

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

Inspectez l'élément sur lequel vous avez cliqué dans Firefox / Chrome pour voir les clics sur les données monter et descendre lorsque vous cliquez, ajustez l'heure (1000) en conséquence.