Släcka lager onMouseOut

Jag behövde ett menyskript och efter att ha letat och inte hittat något som passade mig så knopade jag ihop min egen meny. Det är en ytterst enkel historia men funkar precis som jag vill. Det enda som jag inte fått till är att det sist öppnade menylagret ska släckas när man för musen utanför menyområdet!

Alltså... hur släcker jag ned alla lager när jag för musen bort från menyn?

Detta funkar helt perfekt i IE men inte alls i FF. Givetvis har jag tillhörande funktioner och tilldelningar som gör att det fungerar i IE men varför vill inte detta fungera i FF? I Opera fungerar det också liksom i en liten browser som heter SlimBrowser. I Mozilla fungerar det givetvis inte.

Hur får jag det att fungera även i FF och Mozilla?

document.onmouseover = closeIt

function closeIt(){
currEl = window.event.toElement;
if (currEl.className != "open")
closeAll();
}

om du kör FireFox kan du öppna Verktyg -> JavaScript-konsoll.
där får du upp alla felmeddelande.
Använder du getElementById(...)? Om du gör det tänk på att IE tillåter att man hämtar element med deras name-attributet medans FF bara tillåter hämtning via ID-attributet.
Vet du att det är koden du skickade med som inte fungerar i FF och inte någon annanstans?

Det är nog bättre om du skicka med all kod så det blir lättare att testa.

Jag öppnade precis upp JavaScript-konsollen och det visar sig att det smäller på raden:
"currEl = window.event.toElement;"
"window.event has no properties"

Ja, jag använder getElementById och jag går mot id:et. Saken är den att allting fungerar även i FF när det gäller tändandet och släckandet av alla lager. Det är bara den ovan inklippta koden som inte fungerar... eller rättare sagt kodsnutten: "currEl = window.event.toElement;"

Jag tänkte att det skulle bli kladdigt med en massa kod men here it is...

<style>.open {}</style>
<script language="javascript1.2">
document.onmouseover = closeIt 
function closeIt(){ 
 currEl = window.event.toElement;  
 //alert(currEl.className);
 if (currEl.className != "open")
 	closeAll();
} 
function showLayer(val){
	closeAll();
	document.getElementById(val).style.visibility = "visible";
}
function closeAll(){
	document.getElementById("a").style.visibility = "hidden";
	document.getElementById("b").style.visibility = "hidden";
	document.getElementById("c").style.visibility = "hidden";
	document.getElementById("d").style.visibility = "hidden";
}
</script>

<div id="menubar" style="position:absolute; top:100px; left:240px; width:440px; height:20px; z-index:3;" class="open">
<table width="440" height="20" class="open">
	<tr style="cursor:pointer" class="open">
		<td width="110" height="20" onMouseOver="showLayer('a');" style="font-family:Verdana; font-size:12px; color:black; font-weight:bold;" class="open">A</td>
		<td width="110" onMouseOver="showLayer('b');" style="font-family:Verdana; font-size:12px; color:black; font-weight:bold;" class="open">B</td>
		<td width="110" onMouseOver="showLayer('c');" style="font-family:Verdana; font-size:12px; color:black; font-weight:bold;" class="open">C</td>
		<td width="110" onMouseOver="showLayer('d');" style="font-family:Verdana; font-size:12px; color:black; font-weight:bold;" class="open">D</td>
	</tr>
</table>
</div>

<div id="a" style="position:absolute; top:120px; left:240px; width:110px; height:200px; z-index:2; visibility:hidden;" class="open">
<table width="110" height="45" class="open">
	<tr style="cursor:pointer" class="open">
		<td width="110"  onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgdfg</td>
	</tr>
	<tr style="cursor:pointer">
		<td width="110" onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgsdfg</td>
	</tr>
	<tr style="cursor:pointer">
		<td width="110" onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgsdfg</td>
	</tr>
</table>
</div>

<div id="b" style="position:absolute; top:120px; left:350px; width:110px; height:200px; z-index:2; visibility:hidden" class="open">
<table width="110" height="45" class="open">
	<tr style="cursor:pointer" class="open">
		<td width="110" onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgsdg</td>
	</tr>
	<tr style="cursor:pointer">
		<td width="110" onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgsdfg</td>
	</tr>
	<tr style="cursor:pointer">
		<td width="110" onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgsdfg</td>
	</tr>
</table>
</div>

<div id="c" style="position:absolute; top:120px; left:460px; width:110px; height:200px; z-index:2; visibility:hidden" class="open">
<table width="110" height="45" class="open">
	<tr style="cursor:pointer" class="open">
		<td width="110" onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgsdg</td>
	</tr>
	<tr style="cursor:pointer">
		<td width="110" onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgsdfg</td>
	</tr>
	<tr style="cursor:pointer">
		<td width="110" onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgdfg</td>
	</tr>
</table>
</div>

<div id="d" style="position:absolute; top:120px; left:570px; width:110px; height:200px; z-index:2; visibility:hidden" class="open">
<table width="110" height="30" class="open">
	<tr style="cursor:pointer" class="open">
		<td width="110" onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgdfg</td>
	</tr>
	<tr style="cursor:pointer">
		<td width="110" onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgfg</td>
	</tr>
</table>
</div>

(Ja, koden går givetvis att optimera en del men jag ville få fram menyn innan jag la in skiten där den ska vara :)

har aldrig använt toElement så där vet jag inte vad man ska göra men sökte lite på google och hittade följande länk.
http://codingforums.com/archive/index.php?t-63268.html

kopierar in informationen från länken om det skulle försvinna.

JBChris
07-11-2005, 11:42 PM
Okay Everyone,
I need to know soon: Is there a workaround for window.event.toElement in Firefox?
I need to check if on MouseOut the mouse goes to the <body> or another <img> tag.
If anyone can help I would be most grateful. If I need to clarify just ask.

Thanks,
Josh
glenngv
07-12-2005, 03:00 AM
function getSourceTag(evt){
if (!evt) evt = window.event;
var el = (evt.srcElement) ? evt.srcElement : (evt.target) ? evt.target : null;
if (el){
window.status = el.tagName; //debug
switch(el.tagName){
case "BODY":
alert("body");
break;
case "IMG":
alert("image");
break;
//...
}
}
}
...
<body onmouseover="getSourceTag(event)">

Tack Hulk!
Dessvärre hjälper inte det mig helt och hållet. Jag hittade själv samma sak och satt och labbade med det. Det funkar men jag har inte åtkomst till body-taggen så jag måste försöka fyra av eventet i scriptet. Det går ju i IE så varför skulle inte det gå i FF? Lite dumt för annars borde den där koden lösa skäggbiffen för mig...

Detta fungerar i IE men inte i FF:
document.onmouseover = funktionsanrop(event)

Ok... nu har jag äntligen löst det hela! :)

Jag skapade ett lager och la allting i det lagret samt fyrade av funktionsanropet i div-taggen istället för i body-taggen. Det är inte snyggt men det funkar...

Tack Hulk för din hjälp!