onMouseover von Ebenen abhängig machen

[Carter]

Hallo,

ich habe einen Div-Container mit einem "onMouseover"-Attribut und einen  weiteren Div-Container mit "position:absolute" über den ersten positioniert, der diesen teilweise verdeckt. Er hat ebenfalls ein "onMouseover"-Attribut. Wenn ich die Maus über ihn bewege wird das Event zwar ausgelöst, aber gleich danach auch das des darunter liegenden Elements, obwohl es gar nicht sichtbar ist. Hat jemand einen Tip wie man das abstellen kann? Vielleicht mit einem Check ob das auslösende Element ganz oben liegt?

Viele Grüße
Carter

[peter]

Hi,

wenn Events auf einem Objekt ausgelöst werden, weden sie automatisch an das "nächsthöhere Objekt" weitergegeben, durchlaufen also die gesamte "Dokumentenhierarchie" bis sie im window angekommen sind.
Das läßt sich aber verhindern, indem du das explizit angibst.
Leider haben der IE und Netscape zwei unterschiedliche Event-Modelle.
Während beim Netscape das Event direkt an die auf ihm notierte Funktion übergeben wird, wird das Event im IE in einer "globalen Variable" als "Unterobjekt" bzw. Eigenschaft von window gespeichert.

Im IE hast du also Zugriff auf das Event über:

window.event

Im Netscape kannst du durch notieren eines Parameters direkt in der Funktion auf das Event zugreifen:

function meineFunktion(event)
{
event //direkter Zugriff auf das Event
}

Der Parameter kann auch anders benannt werden z.B.: "e"

Die Inkompatibilität beider Event-Modelle kannst du folgendermaßen umgehen:

function meineFunktion(e)
{
if(!e)  //nachschauen, ob der Funktion ein Event übergeben wurde
{e=window.event;} //wenn nicht, IE-Event in Variable"e" speichern.
}

Jetzt hast du in der Funktion über die Variable "e" Zugriff auf das Event, egal obs IE oder NS is.
Jetzt mußt du nur noch verhindern, daß das Event weitergegeben wird:

Beim IE mußt du dazu die entsprechende Eigenschaft des Event auf true setzen:

e.cancelBubble=true;

und im NS ist es eine Methode des Event-Objektes und geht so:

e.stopPropagation();

Zusammengefaßt läßt sich dein Vorhaben also folgendermaßen realisieren:

function meineFunktion(e)
{
if(!e)
 {e=window.event;}

if(e.stopPropagation)
    {e.stopPropagation();}
else
    {e.cancelBubble=true;}

return false;
}

Gruß
peter

[Carter]

Hi Peter,

das ist perfekt! Vielen Dank für die ausführliche Beschreibung und die Beispiele.

Viele Grüße
Carter

[molily]

Hallo,

ich habe einen Div-Container mit einem "onMouseover"-Attribut und einen  weiteren Div-Container mit "position:absolute" über den ersten positioniert, der diesen teilweise verdeckt. Er hat ebenfalls ein "onMouseover"-Attribut. Wenn ich die Maus über ihn bewege wird das Event zwar ausgelöst, aber gleich danach auch das des darunter liegenden Elements, obwohl es gar nicht sichtbar ist.

Das kann wie gesagt nur durch das Event-Bubbling passieren.
Dieses Verhalten ist bei verschachtelten Elementen zumeist gewünscht und auch logisch.
Wieso verschachtelst du also die Elemente? Bei nicht verschachtelten, im Knotenbaum eher nebeneinander liegenden Elementen passiert dieses Verhalten ja nicht.

Mathias