zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Verständnisproblem bei Mausevents

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.07.2009, 15:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.02.2007
Beiträge: 6
d-snake befindet sich auf einem aufstrebenden Ast
Frage Verständnisproblem bei Mausevents

Hallo Forum,

ich möchte für meine Webseite ein Layermenü programmieren. Das Anzeigen und Öffnen des Menüs klappt auch soweit ganz gut. Doch wenn ich über mein geöffnetes Layermenü drüber fahre, wird sofort das onmousehover Event und gleich danach das onmouseout Event gefeuert. Hier mal der HTML & der JS Code dazu:

HTML:
HTML-Code:
<div id="header_menu">
		<ul class="level1">
		<li><a onmouseout="onHeaderMenuItem_out(this)" onmouseover="onHeaderMenuItem_hover(this)" href="index.php?id=9">Home</a></li>
		<li class="act"><a onmouseout="onHeaderMenuItem_out(this)" onmouseover="onHeaderMenuItem_hover(this, 'submenu_8')" href="index.php?id=8">Wohnungen</a>
			<div onmouseout="onSubmenuContainer_out();" onmouseover="onSubMenuContainer_over();">
				<ul style="display: none;" id="submenu_8" class="level2">
					<li><a href="index.php?id=20">Mein Merkzettel</a></li>
					<li><a href="index.php?id=21">Suche</a></li>
				</ul>
			</div>
		</li>
		<li><a onmouseout="onHeaderMenuItem_out(this)" onmouseover="onHeaderMenuItem_hover(this, 'submenu_7')" href="index.php?id=7"/>
			<div onmouseout="onSubmenuContainer_out();" onmouseover="onSubMenuContainer_over();">
				<ul style="display: none;" id="submenu_7" class="level2">
					<li><a href="index.php?id=32"/></li>
					<li><a href="index.php?id=31">Test</a></li>
					<li><a href="index.php?id=30">bla</a></li>
				</ul>
			</div>
		</li>
		<li><a onmouseout="onHeaderMenuItem_out(this)" onmouseover="onHeaderMenuItem_hover(this, 'submenu_6')" href="index.php?id=6">Service</a>
			<div onmouseout="onSubmenuContainer_out();" onmouseover="onSubMenuContainer_over();">
				<ul style="display: none;" id="submenu_6" class="level2">
					<li><a href="index.php?id=29">Testseite 1</a></li>
					<li><a href="index.php?id=28">Testseite 2</a></li>
					<li><a href="index.php?id=27">Testseite 3</a></li>
				</ul>
			</div>
		</li>
		<li><a onmouseout="onHeaderMenuItem_out(this)" onmouseover="onHeaderMenuItem_hover(this)" href="index.php?id=5">Gut zu Wissen</a></li>
		</ul>
</div>
Dazu noch den JS Code:
Code:
var currentFoldOutMenu;
var cursorInSubmenuContainer = false;
var checkCursorStateTimer;
var outCount = 0;

function onHeaderMenuItem_hover(item, submenuContainer) {
	clearTimeout(checkCursorStateTimer);
	if (item != null) {
		if (item.parentNode.nodeName == "LI" && item.parentNode.className != "act") {
			item.parentNode.style.backgroundPosition = "left 0px";
		}
	}
	if (currentFoldOutMenu != null) {
		currentFoldOutMenu.style.display = "none";
		currentFoldOutMenu = null;
	}
	if (submenuContainer != null) {
		var submenuContainerObj = document.getElementById(submenuContainer);
		if (submenuContainerObj != null && 
			submenuContainerObj.style.display == "none") {
			submenuContainerObj.style.display = "block";
			currentFoldOutMenu = submenuContainerObj;
		}
	}
}

function onHeaderMenuItem_out(item) {
	if (item != null) {
		if (item.parentNode.nodeName == "LI" && item.parentNode.className != "act" ) {
			item.parentNode.style.backgroundPosition = "left 53px";
		}
	}
	if (currentFoldOutMenu != null) {
		 checkCursorStateTimer = setTimeout(checkFoldOutState, 250);
	}
}

function onSubMenuContainer_over() {
	cursorInSubmenuContainer = true;
	// Testmode
	var checker = document.getElementById("checkField");
	outCount ++;
	if (checker != null)
		checker.innerHTML = outCount; 
}

function onSubmenuContainer_out() {
	if (currentFoldOutMenu != null) {
		currentFoldOutMenu.style.display = "none";
		currentFoldOutMenu = null;
		cursorInSubmenuContainer = false;
	}
}

function checkFoldOutState() {
	if ((!cursorInSubmenuContainer) && (currentFoldOutMenu != null)) {
		currentFoldOutMenu.style.display = "none";
		currentFoldOutMenu = null;
	}
}
Wie kann ich sagen, dass das mouseout Event des Submenü Containers erst gefeuert wird, wenn der entsprechende DIV Container auch wirklich verlassen wird und schon wenn ich über ein enthaltenes Objekt fahre?

Danke schon mal für eure Hilfe

Grüß d-snake
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.07.2009, 11:42
Benutzer
neuer user
 
Registriert seit: 11.04.2004
Beiträge: 61
molily wird schon bald berühmt werden
Standard

Zitat:
Zitat von d-snake Beitrag anzeigen
Wie kann ich sagen, dass das mouseout Event des Submenü Containers erst gefeuert wird, wenn der entsprechende DIV Container auch wirklich verlassen wird und schon wenn ich über ein enthaltenes Objekt fahre?
mouseout-Ereignisse steigen im Elementbaum auf (Event-Bubbling), das heißt, bei den a-Elementen auf der ersten Menüebene kommen ganz viele irrelevante mouseout-Ereignisse an, die von Elementen aus dem Submenü stammen.

Diese mouseout-Ereignisse musst du herausfiltern, da sie, wie du auch sagst, nicht bedeuten, dass das Submenü verlassen wurde.

Im Grunde gibt es für dieses Problem die Events mouseenter und mouseleave. Die funktionieren ähnlich wie mouseover und mouseout, aber sie steigen nicht auf und wenn sie passieren, dann wurde die Box des Elements tatsächlich verlassen und nicht eine Box eines Kindelements.

Leider unterstützen noch nicht alle Browser diese nützlichen (von Microsoft herrührenden) Event-Typen. Man kann das Verhalten allerdings nachbauen, indem man im mouseover- und mouseout-Handler einige Zusatzprüfungen einbaut.

Ein Beispiel: Event-Handling bei einem Aufklapp-Menü

Da wird abgefragt, zu welchem Element sich die Maus hinbewegt eventobjekt.relatedTarget bzw. eventobjekt.fromElement im IE). Dann wird geprüft, ob dieses ein Kindelement des aktuellen Elements ist (mit element.contains()). Falls ja, wird das Ereignis ignoriert, andernfalls das Submenü ausgeblendet.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.07.2009, 14:08
Benutzerbild von Thor
Supreme Commander
XHTMLforum-Mitglied
 
Registriert seit: 13.11.2008
Ort: Bremen
Beiträge: 156
Thor befindet sich auf einem aufstrebenden Ast
Standard

Mal abgesehen von deinem Problem, warum hast du um jede <ul> noch ein <div>? Dort wird nichts gruppiert und die Events kannst du auch der <ul> geben.

Ausserdem wird dein Menü nicht funktionieren, wenn der Besucher JavaScript deaktiviert hat, weil dann die Events nicht abgefangen werden, es wird also nie ein Untermenü angezeigt werden.

So ein Menü erstellt man besser mit einer serverseitigen Scriptsprache wie z.B. PHP und CSS.
__________________
The very jung do not always do as they are told.
Mit Zitat antworten
Antwort

Stichwörter
events, javascript, mouseover

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Verständnisproblem bei float und clear Proton CSS 3 27.05.2011 15:30
INCLUDE - Verständnisproblem noScale Serveradministration und serverseitige Scripte 2 09.05.2009 21:12
Verständnisproblem mit Conditional Comments im IE6 kadees CSS 6 03.08.2006 23:10
Grundlegendes Verständnisproblem: margin gegenüber body E|H CSS 5 27.05.2006 15:47
verständnisproblem, wie nennt man die ebenenanzeigen? wkoehler CSS 1 25.05.2006 12:36


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:20 Uhr.