Discussion :

[Meardon]

Bonsoir,

J'ai du mal à gérer un évènement dans des div imbriqués. Voici mon code (simplifié) :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<style>
    #mainview { position:relative; margin:0; height:720px; overflow:hidden; }
    #mainview #locations li { position:absolute; width:86px; height:43px; list-style-type:none; }
    #mainview #locations li a { display:block; position:absolute; bottom:0px; left:-2px; width:90px; height:70px; outline:none; }
    #mainview #barDesc { position:relative; top:600px; display:none; }
</style>
 
<div id="mainview" onclick="document.getElementById('barDesc').style.display='none'">
    <div id="locations">
        <li><a href="javascript:document.getElementById('barDesc').style.display='block'"></a></li>';
    </div>
    <div id="barDesc"></div>
</div>

Donc j'ai ma vue principale "mainview" dans laquelle est contenue une barre d'infos "barDesc". Cette dernière est invisible, jusqu'à ce qu'on clique sur un label "locations". Puis on clique n'importe où sur la page pour faire disparaître la barre.
Le problème, c'est que je ne souhaite pas que la barre disparaisse si on clique dessus ! Ce qui est le cas, car le div se trouvant en-dessous capte toujours les évènements ! J'ai essayé d'ajouter des z-index sur la feuille de style, ça n'a rien changé.
Comment puis-je y remédier ?

[Kerod]

Pourquoi ne pas faire ainsi tout simplement ?

Code html :

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

1
2
3
4
5
6
<div id="mainview">
    <div id="locations">
        <li><a href="javascript:document.getElementById('barDesc').style.display='block'"></a></li>
    </div>
    <div id="barDesc"></div>
</div>

Je dis ça parce que je vois pas pourquoi on cliquerait sur le premier div

[Meardon]

Ben ça c'est pas résoudre un problème mais le supprimer

Il faut cliquer sur le premier div pour faire disparaître le second (et il n'est pas question de faire autrement).

Mon message va faire tout le tour des forums on dirait

[Kerod]

Pourquoi ne pas faire un switch directement sur ton li a ? C'est lui qui fait disparaitre et apparaitre le div.

http://www.developpez.net/forums/d46...r-masquer-div/

[Meardon]

Ben non, je tiens vraiment à ce que ce soit mon div d'arrière-plan qui gère la disparition.

Mais c'est bon, j'ai trouvé une solution en écrivant une petite fonction javascript, après avoir appris que les divs conteneurs étaient appelés après les div imbriqués

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
20
21
var clickOnBar = false;
 
function hideBarDesc(obj)
{
	if (obj.id == "barDesc")
	{
		clickOnBar = true;
	}
	else
	{
		if (clickOnBar == true)
		{
			clickOnBar = false;
			return false;
		}
		else
		{
			document.getElementById('barDesc').style.display='none';
		}
	}
}