Listbox javascript [Résolu]

Signaler
Messages postés
45
Date d'inscription
lundi 21 avril 2008
Statut
Membre
Dernière intervention
7 août 2008
-
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
-
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

21 réponses

Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
sauf... le proagation des évênments aux parents !
ce doit être  ça qui te gènes ?

<head>
<script type="text/javascript">
   function cacher(evt)
   {  if (window.event)
           evt.cancelBubble = true;
      else evt.stopPropagation();
        document.getElementById('toto').style.display='none';
   }
   
</script>
</head>

<select id="toto">
    <option>un
    <option>deux
</select>
cacher

CordialementBul[mon Site][M'écrire], <!--
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
relis !
dans le fonction je n'utilise pas event mais evt !
          Cordialement    Bul  [mon Site] [M'écrire], <!--
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
>>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], <!--
Messages postés
45
Date d'inscription
lundi 21 avril 2008
Statut
Membre
Dernière intervention
7 août 2008

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..
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
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], <!--
Messages postés
1251
Date d'inscription
mercredi 7 août 2002
Statut
Modérateur
Dernière intervention
10 avril 2013

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
Messages postés
45
Date d'inscription
lundi 21 avril 2008
Statut
Membre
Dernière intervention
7 août 2008

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 ...
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
>>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], <!--
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
14
Bonjour,
pourquoi ne pas essayer l'événement onblur sur le SELECT
<select onblur="alert('OUT');">

  <option>UN</option>
  <option>DEUX</option>

  <option>TROIS</option>

  <option>QUATRE</option>
</select>
;O)
Messages postés
45
Date d'inscription
lundi 21 avril 2008
Statut
Membre
Dernière intervention
7 août 2008

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.
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
>>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], <!--
Messages postés
45
Date d'inscription
lundi 21 avril 2008
Statut
Membre
Dernière intervention
7 août 2008

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.
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
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], <!--
Messages postés
45
Date d'inscription
lundi 21 avril 2008
Statut
Membre
Dernière intervention
7 août 2008

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
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
>>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], <!--
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
function cacher(evt)

 {  if (window.event)

            evt.cancelBubble = true;

      else evt.stopPropagation();

    ...

...onclick="cacher(event);"...



                 Cordialement    Bul   [mon Site] [M'écrire],

<!--
Messages postés
45
Date d'inscription
lundi 21 avril 2008
Statut
Membre
Dernière intervention
7 août 2008

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
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
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], <!--
Messages postés
1782
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
14 janvier 2021
115
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
Messages postés
45
Date d'inscription
lundi 21 avril 2008
Statut
Membre
Dernière intervention
7 août 2008

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