[DOM] Gestion des evenements

Version imprimable

20/01/2009, 10h32
islyoung2

[DOM] Gestion des evenements

Bonjour à tous;
voila je ne sais pas si c'est le bon endroit pour poster mon message :P.
voila j'essaye de créer une page web, cette page contient un menu horizontal avec des éléments par ex (menu1, menu2, menu3 ....).
Où chaque menu lorsque on clic dessus il génère un sous menu (par ex menu1 ---> sous_menu 1).
ce sous menu je veux qu'il reste visible et il disparait seulement dans deux cas :
1- lorsque je clic à nouveau sur le menu père (menu 1).
2- et lorsque je clic sur n'importe quel autre endroit dans ma page (un autre menu, un espace vide, un champ de text ....)
pour le 1er cas c'est facile je sais le faire, mais pour le deuxième cas je suis face à un mur :aie:.
si vous utilisez la messagerie de hotmail, vous voyez certainement où je veux en venir.
ahe je développe en php.
MERTHI
20/01/2009, 10h53
marcha

Salut,

Tu peux gérer certains évènements au niveau de la fenêtre et connaitre
l'élément DOM qui était sous la souris (voir event.target)
21/01/2009, 15h42
islyoung2

Bonjour, merthi pour ta réponse:
voila j'ai visiter le lien mais sans aucun résultats, j'ai rien compris :aie:.
peut tu m'expliquer brièvement ce que je dois faire, (en lisant mes besoins)
merthi encor

Salut,

voici un bout de code pour tester le concept
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type='text/javascript' src='/libs/jquery-1.2.6.js'></script> <script type='text/javascript'> window.onclick = function(event) { var event = event || window.event; var target = event.target || event.srcElement; alert(target.nodeName); } </script> </head> <body> <div>abc<p>def<strong>hij</scrong>klm</p>nop</div> </body> </html>
Pour tester clique à différents endroits.

L'idée pour ton menu c'est qu'en cas de click tu ferme le menu ouvert
sauf si ton click est à l'intérieur (ou autres conditions suivant tes besoins)

Pour cela il te faut déterminer l'élément DOM sur lequel on a cliqué.

Par la suite il faudra probablement rechercher en remontant la hierarchie
du DOM pour vérifier le ou les éléments parents de l'élément cliqué afin
de savoir si il est dans un menu ou pas.

MERTHI Beaucoup pour ta réponse j'ai trouvé la solution :yaisse2:.

Code:

1
2
3
4
5
6
7
8
9
10
11
 
window.onclick = function(event) 
{
	var event = event || window.event;
	var target = event.target || event.srcElement;
	if(target.parentNode.id != "marck_as_td" && target.parentNode.id != "move_to_td")
	{
		document.getElementById('menu2').style.visibility='hidden'	;
		document.getElementById('menu1').style.visibility='hidden'	;
	}
}