Fonction différente pour la même classe sur 'clic'/'dblclick'

Question

Ce sont mes deux fonctions, en un seul clic, cela fonctionne très bien, mais sur dblclick les deux fonctions exécutent, une idée? J'ai essayé d'utiliser live au lieu de delegate mais les deux fonctions exécutent sur dblclick

// Change Status on click 
$(".todoBox").delegate("li", "click", function() { 
    var id = $(this).attr("id"); 
    $.ajax({    
     //ajax stuff 
}); 

return false; 
}); 



// Double Click to Delete 
$(".todoBox").delegate("li", "dblclick", function(){ 
    var id = $(this).attr("id"); 
    $.ajax({ 
     //ajax stuff 
    }); 

return false; 
}); 

Answer 1

De la documentation API:

Il est déconseillé de lier les gestionnaires à la fois les événements de clic et DblClick pour le même élément. La séquence d'événements déclenchée varie d'un navigateur à l'autre, certains recevant deux événements de clic et d'autres un seul. Si une interface qui réagit différemment aux simples et doubles-clics ne peut pas être évitée, l'événement dblclick doit être simulé dans le gestionnaire de clic. Nous pouvons y parvenir en enregistrant un horodatage dans le gestionnaire, puis en comparant l'heure actuelle à l'horodatage enregistré lors des clics suivants. Si la différence est assez petite, nous pouvons traiter le clic comme un double-clic.

Je pense que cela signifie que vous feriez votre action click dans le gestionnaire de délai. Si vous obtenez un autre clic et que le gestionnaire de dépassement de délai n'a pas encore eu lieu, vous annulez le délai et le code dblclick.

Answer 2

Comme Pointy a souligné, click et dblclick sur un même élément peut être difficile, et voici une implémentation comment vous pouvez « faux » à l'aide setTimeout:

var clickTimeout = false; 
$('#element').click(function() { 

    if(clickTimeout !== false) { 
     // I'm doubleclick! 
     clearTimeout(clickTimeout); 
     clickTimeout = false; 
    } else {   
     clickTimeout = setTimeout(function() { 
      // I'm click! 
      clickTimeout = false; 
     }, 400); 
    } 
}); 

Fondamentalement, cela signifie que si l'utilisateur clique à nouveau sur le même élément dans les 400 millisecondes, c'est un double clic. Notez que dans ce cas, la variable clickTimeout est globale et affectera tous les éléments, ce qui peut provoquer un comportement étrange si l'utilisateur clique sur deux éléments différents en 400 millisecondes, mais cela devrait vous donner au moins quelques idées.