---
title: "Problem med onmouseout"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/134332-problem-med-onmouseout"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "Web-Tor"
published: "2005-09-15T11:09:08.000Z"
updated: "2005-09-20T05:49:18.000Z"
replies: 14
views: 774
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/134332-problem-med-onmouseout"
---

# Problem med onmouseout

## #1 — Web-Tor, 2005-09-15T11:09Z

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>
```

Permalänk: https://www.webforum.nu/p/134332

## #2 — Koplik, 2005-09-15T12:09Z

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)

Permalänk: https://www.webforum.nu/p/1672068

## #3 — Web-Tor, 2005-09-15T13:09Z

Ja, vist är det knepigt!?
Jag har också testat med att bygga upp menyn med olika element men utan nåt vidare resultat.

Permalänk: https://www.webforum.nu/p/1672089

## #4 — Peter S, 2005-09-15T14:19Z

```
<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>
```

Permalänk: https://www.webforum.nu/p/1672112

## #5 — Web-Tor, 2005-09-15T14:47Z

Inte för att jag fattar ett skit av scriptet men, tack! :)

Permalänk: https://www.webforum.nu/p/1672126

## #6 — Peter S, 2005-09-15T15:02Z

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>
```

Permalänk: https://www.webforum.nu/p/1672129

## #7 — Web-Tor, 2005-09-16T06:30Z

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?

Permalänk: https://www.webforum.nu/p/1672348

## #8 — Peter S, 2005-09-16T07:05Z

```
<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>
```

Permalänk: https://www.webforum.nu/p/1672370

## #9 — Web-Tor, 2005-09-16T07:35Z

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.

Permalänk: https://www.webforum.nu/p/1672383

## #10 — Peter S, 2005-09-16T07:46Z

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.  :)

Permalänk: https://www.webforum.nu/p/1672385

## #11 — Web-Tor, 2005-09-16T08:53Z

Men då måste jag har onclick/onmouseover på alla element, eller?

Permalänk: https://www.webforum.nu/p/1672414

## #12 — Peter S, 2005-09-16T09:35Z

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".

Permalänk: https://www.webforum.nu/p/1672424

## #13 — Web-Tor, 2005-09-19T08:25Z

> 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...

Permalänk: https://www.webforum.nu/p/1673262

## #14 — Peter S, 2005-09-19T18:49Z

Jag tror att en global variabel är lösningen på ditt problem. Ett exempel är bifogat.

Bilagor:

- [wt.zip](https://www.webforum.nu/a/7830.zip)

Permalänk: https://www.webforum.nu/p/1673426

## #15 — Web-Tor, 2005-09-20T05:49Z

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! :)

Permalänk: https://www.webforum.nu/p/1673493

---

Tråden på webben: https://www.webforum.nu/amne/javascript/134332-problem-med-onmouseout
