clicker pour fermer une div

Version imprimable

04/07/2011, 15h11
defacta

clicker pour fermer une div

Salut,

Voila, j'ai simplifié au max ma page pour vous la montrer:
http://boxfly.free.fr/test/login.html

Quand on clique sur --- Connexion -- cela affiche une div contenant des identifiants de connexion.
Pour la fermer il suffit de re-cliquer sur Connexion. J'aimerai qu'un clique n'importe ou sur la page (sauf dans cette div) me ferme cette div.
Je ne vois pas comment faire, quelqu'un aurait une idée ?

Merci,
Vincent.
04/07/2011, 15h15
vermine

Bonjour,

Vous pouvez jouer avec le onclick du <body>.
04/07/2011, 15h25
defacta

Citation:

Envoyé par vermine

Bonjour,

Vous pouvez jouer avec le onclick du <body>.

Le onClick du <body> fermer la div même si la souris est dans la div du menu d'authentification, or elle ne doit pas se fermer avec un click dans cette div... :?
04/07/2011, 15h36
vermine

Oups

Oui, pardon. Vous devez gérer la propagation avec stopPropagation ou preventDefault mais j'avoue que je ne sais plus si c'est crossbrowser.
04/07/2011, 16h14
NoSmoking

Bonjour,
la fonction associée au click sur le BODY doit tester qui à reçu l'événement, si c'est la DIV on ne fait rien sinon si elle est affichée on la masque.
04/07/2011, 16h35
defacta

Citation:

Envoyé par NoSmoking

Bonjour,
la fonction associée au click sur le BODY doit tester qui à reçu l'événement, si c'est la DIV on ne fait rien sinon si elle est affichée on la masque.

Comment on peut savoir qui recoit l'évènement onClick ? parce que stopPropagation, ca a l'air bien compliqué...
04/07/2011, 18h19
Arekk
Salut,

Déjà tu te simplifierais vraiment la tâche en utilisant la librairie jquery.
Cela te permettra de tout condenser et de simplifier à mort ton code.

2 conseils aussi :
Évite les tableaux quand tu peux (là sur un formulaire, tu peux je pense).
Mets tes styles dans une CSS , même si c'est juste en début de page. Regroupes les.

Ensuite pour ton histoire de click, toujours en jQuery tu peux utiliser la fonction :not (qui équivaut à un except "blabla")

En gros tu peux rendre ton clique avec un truc du genre :
Code:

1 2 3 4 5 6 7 8 $('#menuTD_1').click(function() { $('#tadiv').show; $("#tadiv").addClass("opened"); }); $('body :not(.opened)').click(function() { $('#tadiv').hide; });

il faut utiliser target ou srcElement, un petit exemple au naturel

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
</head>
<body>
<p>petit texte</p>
<a href="page.html">petit lien</a>
<script type="text/javascript">
document.onclick = function(e){
  e = e || event;
  var oElem = e.target || e.srcElement;
  alert( oElem.tagName);
  if( oElem.tagName == 'A'){
    return false;
  }
}
</script>
</body>
</html>