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

Question

Existe-t-il quelque chose dans jQuery qui me permettrait de distinguer le comportement en double clic et en simple clic?

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

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

Merci :)

Answer 1

J'ai trouvé que Jean-Strickler la réponse n'a pas tout à fait faire ce que j'attendais. Une fois que l'alerte est déclenchée par un second clic, dans les deux deuxième fenêtre, chaque clic supplémentaire déclenche une autre alerte jusqu'à ce que vous attendez deux secondes avant de cliquer à nouveau. Donc, avec Jean-code, un triple clic agit en deux double clique sur l'endroit où je attendre pour agir comme un double-clic suivi d'un seul clic.

J'ai retravaillé sa solution de fonctionner de cette façon et à l'écoulement dans une façon que mon esprit ne peut appréhender. J'ai laissé tomber le retard en bas de 2000 à 700 pour mieux simuler ce que je me sentais être une sensibilité normale. Voici le violon: http://jsfiddle.net/KpCwN/4/.

Merci pour la fondation, Jean. J'espère que cette nouvelle version est utile à d'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
    });

});

Answer 2

La solution donnée par "Nott Responding" semble déclencher les deux événements, click et dblclick lorsque vous double-cliquez. 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);          
}
 

});

L'essayer

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

Answer 3

Bien sûr, liez deux gestionnaires, l’un à click et l’autre à dblclick . Créez une variable qui s'incrémente à chaque clic. puis 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
    }
});
 

Answer 4

Vous pourriez probablement écrire votre propre personnalisé de mise en œuvre de clic/double clic pour l'avoir à attendre pour un supplément de clic. Je ne vois rien dans la base des fonctions jQuery qui vous permettront d'atteindre cet objectif.

Citation de .dblclick() en jQuery site

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

Answer 5

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/