jquery preventDefault l'ancre liée si un double-clic

Question

Description de
Sur notre site Web communautaire chaque utilisateurs nick est un lien vers leur page de profil, mais si le pseudo est double cliqué sur un menu de cet utilisateur est affiché en dessous du pseudo . Le contenu de ce menu contextuel est chargé en utilisant un appel ajax. Jusqu'à présent, nous avons utilisé "javascript:" dans les ancres hrefs, et nous avons pris des clics simples/doubles en utilisant JS. Nous voulions nettoyer les hrefs et ajouter des URLs appropriées pour permettre aux utilisateurs d'ouvrir les liens de profil dans les onglets, etc., tout en maintenant le menu de double-clic. Je me rends compte que ce n'est pas le meilleur design, c'est juste devenu une obsession de travailler.

Problème
Je veux un seul clique pour agir comme normal (envoyer navigateur à href), en double-clique sur preventDefault et appeler une fonction personnalisée (événement) à la place. Je suis capable de le faire en utilisant window.location dans la partie clic simple, mais cela ressemble à la compromission/hack que je voulais améliorer.

code jusqu'à présent
En utilisant answer 1067484 de question 1067464 (ne peuvent pas poster des liens) comme base pour les éléments suivants

(Voir/modifier vivre à http://jsbin.com/iboyo5/2)

Je manque seulement cette partie en un seul clic, je voulais un chemin "plus propre" que window.location et c'est pourquoi je joue avec .unbind() - ce qui n'est pas une solution à 100% non plus. La fonction .unbind() fait ce que je veux, mais elle ne décharge pas le gestionnaire pour l'exécution actuelle du code, donc elle ne fonctionne qu'une fois tous les deux clics. C'est le problème que j'ai besoin de résoudre maintenant. Btw: Cela ne me dérange pas si le premier .click est mis en pause pour la temporisation réglée. Devoir attendre 300 ms avant que l'URL ne "lance" ne pose aucun problème.
Est-ce que je vais devoir abandonner celui-ci et utiliser window.location? Peut-il être résolu en utilisant .live() et .die()?

J'espère avoir fait suffisamment de recherches avant mon premier article ici. Merci!

Answer 1

Affichage de ce que nous avons fini avec au cas où d'autres ont besoin de la même fonctionnalité plus tard. Ceci utilise window.location pour "annuler" l'action preventDefault. J'aimerais apprendre une approche plus propre, mais laissera ceci résolu pour maintenant.

jQuery(document).ready(function($) { 

    /* Member popup menu - Handle single and double clicks for member-links */ 
    function singleClick(e) { 
    e.preventDefault(); 
    var url = $(this).attr("href"); 
    var el = this; 
    setTimeout(function() { 
     var dblclick = parseInt($(el).data('double'), 10); 
     if (dblclick > 0) { 
     $(el).data('double', dblclick-1); 
     } else { 
     $('#result').html('click registered - browser should proceed to url'); 
     window.location = url; 
     } 
    }, 300); 
    } 

    function doubleClick(e) { 
    e.preventDefault(); 
    $('#result').html('double-click registered - browser should stay here'); 
    $(this).data('double', 2); 
    var full_id = $(this).attr("id"); 
    var ids = full_id.split("_"); 
    var id = ids[1]; 
    $.ajax({ 
     url: "....php", 
     data: { 
     page: "ajax.getMemberPopup", 
     id: id 
     }, 
    }); 
    } 

    $(".profile") 
    .bind('click', singleClick) 
    .bind('dblclick', doubleClick); 
    /* End member popup menu */ 
}); 

Answer 2

La solution suivante devrait vous aider à obtenir la fonctionnalité que vous désirez:

balisage Exemple:

<a class="profile" href="#">Stewie</a> 
<br/> 
<a class="profile" href="#">Brian</a> 
<br/> 
<div id="result"/> 

Javascript:

var clickCount = 0; 
var clickTimeout; 
var currentTarget; 

function evaluateClicks(targetElement) { 
    if (clickCount === 1) { 
     $("#result").text(targetElement.text() + ": clicked once"); 
    } else if (clickCount > 1) { 
     $("#result").text(targetElement.text() + ": clicked twice or more"); 
    } 
    clickCount = 0; 
} 

$("a.profile").click(function(e) { 
    e.preventDefault(); 
    var targetElement = $(e.target); 
    /*check to see if the target's href is the same 
    the comparison does not need to be on the href, just something 
    so you can differentiate the two elements from each other. 
    */ 
    if (currentTarget && targetElement.attr("href") !== currentTarget.attr("href")) { 
     clearTimeout(clickTimeout); 
     clickCount = 0; 
    } 
    currentTarget = targetElement; 
    clickCount++; 
    var thingToDo = function() { 
     evaluateClicks(targetElement); 
    }; 
    //reset the current timeout 
    clearTimeout(clickTimeout); 
    clickTimeout = setTimeout(thingToDo, 300); 
}); 

Notez que la comparaison entre les éléments est basé sur la href attribut, en supposant qu'ils sont uniques.