Listbox javascriptRésolu

Question

Bonjour à tous,

je fais appel a vous car je rencontre une difficulté que je n'arrive pas à solutionner.
J'ai crée une listbox en javascript (un bouton qui affiche ou masque une liste a l'aide de la propriété display), voici le code de la fonction appelé par le bouton :

var dernierClick = null;
function verifDoubleClic(id) 
    {
    if ( (dernierClick == this) )
      { 
      dernierClick = null; // on remet à zéro
   document.getElementById(id).style.display='none';
      return true; // c'est bien un double-clic sur le même objet
      }
    else 
      { 
      dernierClick = this; 
      // pour être sûr de cliquer sur le même objet
   document.getElementById(id).style.display='block';
      return false; // c'est un simple clic pour le moment)
      }
   return false;
}

Comme vous pouvez l'observer, le premier clic ouvre la liste, le second la referme.
Aujourd'hui je voudrais améliorer cette fonction pour que la listbox se referme lorsqu'on clique n'importe ou dans la page et si une bonne âme voulait m'aider, parceque la je sèche

cs_bultez · Accepted Answer

sauf... le proagation des évênments aux parents ! ce doit être ça qui te gènes ? cacher CordialementBul[mon Site][M'écrire],

cs_bultez · Answer

>>améliorer cette fonction pour que la listbox se referme lorsqu'on clique n'importe ou dans la page
ben oui... parce que lorsque le select est caché, c'est dur de cliquer dedans !

window.onclick=function() { rendre le select visible; }

je dis select, parce que listbox ça n'existe pas en html, et 
que tu dois vouloir parler d'une 'liste de choix déroulante'

          Cordialement     Bul   [mon Site]  [M'écrire], <!--

leejunfan · Answer

Bonjour bultez,

Je suis effectivement sur la piste de window.onclick.
 Mais dans ta solution, lorsqu'on clique n'importe ou dans la page la 'liste de choix deroulante' s'affiche, ca n'est pas le but. Je voudrais qu'elle s'ouvre uniquement lorsqu'on clique sur le bouton (qui apelle la fonction) mais qu'elle se referme lorsqu'on clique n'importe ou dans la page..

cs_bultez · Answer

ah ! ben fait le contraire alors !
window.onclick=function() { rendre le select INvisible; }
<... bouton     onclick="rendre le select visible"; .. />
          Cordialement    Bul   [mon Site]  [M'écrire], <!--

nickadele · Answer

Bonjour,

Et si tu ferme la liste sur le onmouseout de ta liste ???

Nickadele
----------------------------------------------
non, ma belle ne s'appel pas Adèle
Mon Blog

leejunfan · Answer

Bonjour nickadele,

Pour la première solution, celle de bultez, cela ne fonctionne pas car sir le clic dans la fenêtre ferme la liste, elle sera toujours fermé.
Pour la seconde, celle de nickadele, elle ne convient pas à ma direction qui voudrait en fait reproduire le comportement d'une listbox système.

J'ai imaginé une solution en passant par une seconde fonction appelé sur une div contenant le corps de ma page mais je n'arrive pas à la faire fonctionner, je vous la livre :

sur mon bouton :
var dernierClick = null;
function verifDoubleClic(id) 
    {
    if ( (dernierClick == null) )
      {
   dernierClick='true'
   document.getElementById(id).style.display='block';
   
      return false; // c'est un simple clic pour le moment) 
      }
    else 
      {
     dernierClick = null; // on remet à zéro
   document.getElementById(id).style.display='none'; 
      return true; // c'est bien un double-clic sur le même objet
      }
   return false;
}

et sur la div contenant :

function fermeture(id) {
 if ( (dernierClick == 'true') )
 {
  dernierClick = null;
  document.getElementById(id).style.display='none';
 }
}

Je ne dois pas être bien loin ...

cs_bultez · Answer

>>Pour la première solution, celle de bultez, cela ne fonctionne pas car
sur le clic dans la fenêtre 
>>ferme la liste, elle sera toujours fermé.

ben ????  alors rend visible le select lors de ce click !

tu n'arrives pas à déterminer quand il faut cacher ou montrer....

1° click sur un bouton => mettre  le display à none s'il est inline à inline sinon
2° click sur le bouton : mettre none, click sur la fénêtre mettre inline

3° ... ce que tu veux en fait !

                      Cordialement    Bul    [mon Site]    [M'écrire], <!--

PetoleTeam · Answer

Bonjour, pourquoi ne pas essayer l'événement onblur sur le SELECT ;O)

leejunfan · Answer

Bultez, ca me parait simple pourtant : clic sur le bouton, la liste se déroule ; clic n'importe ou dans la fenêtre, le select est masqué. 
Avec ta solution, l'événement window.onclick qui masque la fenêtre prévaut sur les autres et la liste est toujours masqué, aussi il faut que je lui ajoute une condition. 
J'ai essayé if (document.getElementById(id).style.display=='block') mais ca ne semble pas fonctionner, aussi je tente de passer par une variable comme dans mon exemple précédent.

PetroleTeam, l'évenement onBlur était la solution idéale, malheureusement il ne fonctionne pas sous safari (ni sur firefox 3) qui ne le detecte qu'au clavier.

cs_bultez · Answer

>>Bultez, ca me parait simple pourtant : 
ben c'est simple !!!!!

>>clic sur le bouton, la liste se
déroule ; 

>>clic n'importe ou dans la fenêtre, le select est masqué.
window.onclick=function() { select invisible ; }

point barre.

CordialementBul[mon Site][M'écrire], <!--

leejunfan · Answer

Mais je te répète que les deux fonctions sont en conflit, donc window.onclick prévaut (car si je clic sur le bouton je clic aussi dans ma fenêtre), et ma fenêtre est toujours fermée.

cs_bultez · Answer

je pense que tu n'as même pas essayé mon exemple... 
si ?
curieux, car : ça fonctionne ( ie et ff pas testé pour les autres, mais pas de raisons !) 
click sur le bouton : on cache le select, click ailleurs, on le montre

                Cordialement        Bul   [mon Site]  [M'écrire], <!--

leejunfan · Answer

Bultez, effectivement il me manquait event.stopPropagation(); et event.cancelBubble = true; pour stopper l'événement.
Mais firefox ne semble pas le reconnaitre (ca marche impec sur IE et safari)
 Voici ce que donne mon code :

sur le body :
var dernierClick = null;
function fermeture(id) {
 if (dernierClick == null) {
 return false; 
 }
 else if (dernierClick == 'x')
 {
  dernierClick = null;
  document.getElementById(id).style.display='none';
  return false;
 }
return false;
}

sur mon bouton :
function verifDoubleClic(id) 
    {
 if (event.stopPropagation) {
  event.stopPropagation();
}
event.cancelBubble = true;
    if (dernierClick == null)
      {
 
      // pour être sûr de cliquer sur le même objet
   document.getElementById(id).style.display='block';
   dernierClick='x';
      return false; // c'est un simple clic pour le moment) 
      }
    else 
      {
     dernierClick = null; // on remet à zéro
   document.getElementById(id).style.display='none'; 
      return true; // c'est bien un double-clic sur le même objet
      }
   return false;
}

Reste a résoudre le problème pour firefox (event is not defined)

En tous cas déja un grand merci m'sieur Bultez

cs_bultez · Answer

>>Reste a résoudre le problème pour firefox (event is not defined)
tu ne fais pas comme dans mon exemple !
qui fonctionne avec FireFox et IE, je pense les autres navigateurs aussi
                  Cordialement    Bul  [mon Site] [M'écrire], <!--

cs_bultez · Answer

function cacher(evt)

 {  if (window.event)

            evt.cancelBubble = true;

      else evt.stopPropagation();

    ...

...onclick="cacher(event);"...



                 Cordialement    Bul   [mon Site] [M'écrire],

<!--

leejunfan · Answer

if (window.event) 
            event.cancelBubble = true;
      else event.stopPropagation();

provoque l'erreur "event has no properties" sous firefox. 
Je t'assure je consulte le net et il y a bien un problème avec event et firefox

cs_bultez · Answer

essaye donc mon exemple... tu verras que ça baigne.
>> et il y a bien un problème avec event et firefox
non.  
tu ne fais pas ce qu'il faut ou ton erreur est ailleurs.
          Cordialement    Bul    [mon Site]  [M'écrire], <!--

cs_bultez · Answer

relis !
dans le fonction je n'utilise pas event mais evt !
          Cordialement    Bul  [mon Site] [M'écrire], <!--

@karamel · Answer

jour

apres avoir analeze le proble et meme fait une fonction j'ai ete suurpris de m'appercevoir que contrairement aux autres navigateurs ma fonction ne marche pas avec IE7 motif:

 IE n'interprete pas le onclick mis dans body la question que je me pose c'est ece qu'il n'y a que pour moi que c'est comme ca ou IE a t'il un boge ou je ne sais quoi

leejunfan · Answer

Effectivement, je viens de remarquer la nuance et...ca marche.
Je suis tout content, remerci Bultez

Listbox javascript

21 réponses

Votre réponse

Discussions similaires