14 svar · 770 visningar · startad av Web-Tor
Jag vill trigga onmouseout när jag lämnar en meny men som det är nu så triggas den även om man går långsamt mellan menyalternativen.
Testa följande kod (måste funkar i IE 5+).
<html>
<head></head>
<body>
<ul onmouseout="alert('Lämnar listan')" style="border:1px solid #999;list-style:none;">
<li style="border:1px solid #F00;">Länk 1</li>
<li style="border:1px solid #00F;">Länk 2</li>
<li style="border:1px solid #F00;">Länk 3</li>
</ul>
</body>
</html>
Intressant, har inte märkt detta problem förut, och jag hoppas någon ger ett bra svar på frågan.
Tänkte föreslå att stoppa in listan i en tabell, men märkte att det var exakt samma problem där, även utan en lista mellan de olika cellerna.
Det närmsta förslaget jag kommer på är att lägga in en Timeout med en hundradels delay och clearas om man kommer in i listan igen under den tiden.
Hursomhelst så var det extremt frustrerande att onmouseout triggades hela tiden hur man än gjorde (Testade med layers, tabeller m.m. Men samma resultat)
Ja, vist är det knepigt!?
Jag har också testat med att bygga upp menyn med olika element men utan nåt vidare resultat.
<html>
<head>
<script type="text/javascript">
function f(){
var e = window.event.toElement,
found = false;
while (e.parentNode){
if (e.tagName.toLowerCase() == "ul"){
found = true;
break;
}
e = e.parentNode;
}
if (!found){
alert("Leaving menu!");
}
}
</script>
</head>
<body>
<ul onmouseout="f()" style="border:1px solid #999;list-style:none;">
<li style="border:1px solid #F00;">Länk 1</li>
<li style="border:1px solid #00F;">Länk 2</li>
<li style="border:1px solid #F00;">Länk 3</li>
</ul>
</body>
</html>
Inte för att jag fattar ett skit av scriptet men, tack! :)
När muspekaren lämnar en <li> triggas händelsen onmouseout för det elementet. Denna händelse bubblar sedan uppåt i hierarkin och aktiveras för alla föräldranoder och, framför allt, <ul>-elementet u. Därav din alert().
Koden jag gav kollar föräldranoderna till det element e muspekaren föres till. Om u är släkt med e i rakt uppåtstigande led, d.v.s. att u innehåller e, vet vi att muspekaren fortfarande finns kvar i menyn. När muspekaren lämnar u, kommer inte en annan föräldranod av typen <ul> att hittas, varpå alert():en kommer att ljuda.
Om menyn kommer att innehållas av ett annat <ul>-element, kan du använda följande istället:
<html>
<head>
<script type="text/javascript">
function f(o){
var e = window.event.toElement,
found = false;
while (e.parentNode){
if (e == o){
found = true;
break;
}
e = e.parentNode;
}
if (!found){
alert("Leaving menu!");
}
}
</script>
</head>
<body>
<ul onmouseout="f(this)" style="border:1px solid #999;list-style:none;">
<li style="border:1px solid #F00;">Länk 1</li>
<li style="border:1px solid #00F;">Länk 2</li>
<li style="border:1px solid #F00;">Länk 3</li>
</ul>
</body>
</html>
Okey, då jag med. :)
Menyn är dold från början och visas när man trycker på en knapp. Problemet är att om man aldrig går in över menyn körs ju aldrig onmouseover. Finns det något sätt att stänga menyn när man t.ex. klickar utanför menyn?
<html>
<head>
<script type="text/javascript">
function f(o){
var e = window.event.toElement,
found = false;
while (e && e.parentNode){
if (e == o){
found = true;
break;
}
e = e.parentNode;
}
if (e && !found){
// ...
}
}
function closeMenu(){
var e = window.event.srcElement,
found = false;
while (e && e.parentNode){
var tn = e.tagName.toLowerCase();
if (tn == "li" || tn == "ul"){
found = true;
break;
}
e = e.parentNode;
}
if (e && !found){
document.getElementById("menu").style.display = "none";
}
}
</script>
</head>
<body onmouseup="closeMenu()">
<ul id="menu" onmouseout="f(this)" style="border:1px solid #999;list-style:none; display:none">
<li style="border:1px solid #F00;">Länk 1</li>
<li style="border:1px solid #00F;">Länk 2</li>
<li style="border:1px solid #F00;">Länk 3</li>
</ul>
<form>
<input type="button" value="show menu" onclick="document.getElementById('menu').style.display = 'block'">
</form>
</body>
</html>
Ditt exempel funkar ju fint. :)
Nu ligger min knapp och min meny i olika frames så det funkar inte direkt men det ska jag nog lösa...
Men det finns inte något mer generellt sätt att se om menyn inte är i focus? Här på wF försvinner ju t.ex. popup-menyer när man klickar utanför dom.
Du skulle kunna sätta en variabel till något värde när du öppnar menyn. När man sedan klickar - eller för muspekaren - på ett annat element, kollar du om variabeln är satt och, i sådana fall, stänger menyn. :)
Men då måste jag har onclick/onmouseover på alla element, eller?
Om vi går tillbaka några inlägg
Web-Tor skrev:
Men det finns inte något mer generellt sätt att se om menyn inte är i focus? Här på wF försvinner ju t.ex. popup-menyer när man klickar utanför dom.
Så fungerar ju exemplet jag postade också. Klickar du någon annanstans än i menyn, stängs den. Eller har möjligtvis missuppfattat dig?
Exakt hur menysystemet är uppbyggt på wF vet jag inte. Men jag kan tänka mig att de initialiserar händelsehanterare för varje menyelement som, när man klickar på ett alternativ, sparar vilken meny som är öppen i en global variabel. Klickar du på en annan meny, hämtas värdet på denna variabel med vilket man kan stänga den förra menyn. Givetvis stängs alla menyer skulle man klicka på en "icke-meny".
Så fungerar ju exemplet jag postade också. Klickar du någon annanstans än i menyn, stängs den. Eller har möjligtvis missuppfattat dig?
Nä, du fattar helt rätt. Jag missade en grej i ditt script som gjorde att det inte funkade.
Nu har jag flera frames så jag skulle vilja ha något bättre än onmouseup i body-taggen. Det kan ju vara så att man klickar i någon annan frame och då ligger menyn kvar. Vad jag förstår kan man inte köra onblur på en body-tagg utan man för lägga det på framen (i frameset) men därifrån kan jag inte få closeMenu() utan att funka...
/r Kom på att det inte var några problem att stänga main-framen vid onblur men problemet är ju att den framen inte får focus när menyn öppnas. Focus ligger ju fortfarande kvar i framen där jag öppnar menyn ifrån... Får klura lite till...
Jag tror att en global variabel är lösningen på ditt problem. Ett exempel är bifogat.
Jag kör med en liknande top-variabel för att hålla reda på om menyn är öppen eller stängd.
Efter att jag har öppnat en meny med onclick vill jag att dom andra ska öppnas vid onmouseover och då funkar top-variabeln bra.
Sedan så vill jag även att menyn ska försvinna om man t.ex. går ifrån fönstret så jag kör med onblur på framen där menyn öppnas och flyttar alltid focus till den framen i samband med att jag öppnar en meny.
Tack för all hjälp! :)