[DOM] Gestion des evenements

**islyoung2** · 20/01/2009, 10h32

Bonjour à tous;
voila je ne sais pas si c'est le bon endroit pour poster mon message

.
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

.
si vous utilisez la messagerie de hotmail, vous voyez certainement où je veux en venir.
ahe je développe en php.
MERTHI

**marcha** · 20/01/2009, 10h53

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)

**islyoung2** · 21/01/2009, 15h42

Bonjour, merthi pour ta réponse:
voila j'ai visiter le lien mais sans aucun résultats, j'ai rien compris

.
peut tu m'expliquer brièvement ce que je dois faire, (en lisant mes besoins)
merthi encor

**marcha** · 21/01/2009, 16h27

Salut,

voici un bout de code pour tester le concept

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**islyoung2** · 24/01/2009, 09h58

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

.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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'	;
	}
}

[DOM] Gestion des evenements

JavaScript

Discussions similaires

Partager

Partager