Problèmes d'interface utilisateur Javascript avec le barbotage d'événements

Question

J'essaye de configurer une interface utilisateur Javascript assez simple (imo) et je rencontre des problèmes. J'utilise jQuery. Voici ce que je veux faire:

ont un tas de places à côté du texte, comme ceci:

[ ] Text next to square 
[ ] Text next to square 2 
[ ] Text next to square 3 
[ ] Text next to square 4 

Lorsque vous cliquez sur l'une des places, un div flottant position absolue apparaît. Ce div flottant a quelques options d'interface.

À ce stade, si l'utilisateur clique n'importe où en dehors de la div flottante, la div devrait disparaître. Si l'utilisateur clique sur une autre case, la div d'origine devrait disparaître et une nouvelle devrait apparaître.

Je suis capable de faire apparaître les divs flottantes correctement, mais j'ai du mal à les cacher. Ce que je fais actuellement est attaché un gestionnaire de clic à $(document) dans la fonction qui montre la div flottante. Code simplifié est ci-dessous:

show(jqueryObj) 
{ 
    jqueryObj.show(); 
    $(document).one("click", function() { jqueryObj.hide(); }); 
} 

(Afficher est lié à un coup de langue sur l'un des [ ] boîtes ailleurs)

Le problème que je cours en est que l'événement click semble bouillonner, et function() { jqueryObj.hide(); } est exécuté immédiatement. J'ai essayé de retourner false dans show(), mais cela n'a pas semblé résoudre le problème. Que devrais-je faire ici?

Answer 1

$(document).click(function(e) { 
    e.stopPropagation(); 
    var el = $(e.target); 
    alert(el.get(0).nodeName); 
}); 

En haut de ma tête, cherchez-vous quelque chose comme ça? J'ai ignoré votre code parce que ce n'est pas standard jQuery et un peu abstrait.

Answer 2

Il se peut que votre gestionnaire de clic soit appelé pour le même clic. Si c'est le cas, vous le corrigerez en arrêtant le clic d'origine du bouillonnement (par exemple, tout ce qui appelle votre fonction show).

Une autre option consiste à pirater:

show(jqueryObj) 
{ 
    jqueryObj.show(); 
    setTimeout(function() { 
     $(document).one("click", function() { jqueryObj.hide(); }); 
    }, 0); 
} 

Answer 3

Si je deviens votre droite, votre disparaît lorsque vous interagissez avec elle div flottante car ce document attire l'interaction clic et le cache. Si c'est le cas, vous devez vérifier la cible de votre événement et sortir si c'est la div flottante. Quelque chose comme ceci:

$(document).click(function(e) { 
    var target = $(e.target); 
    if (target.is("#floatingDiv")) return; 
    jqueryObj.hide(); 
}); 

espoir qui aide

Edit: une chose à noter est que vous pouvez vérifier plusieurs conditions dans l'appel .is(). Ainsi, par exemple, vous pouvez vérifier les clics sur la div flottante ET sur l'une de vos boîtes d'activation:

if (target.is("#floatingDiv, .activateBox")) return;