Problem bei onmouseout in <div> mit eingebetteter Liste

[Bert]

Guten Tag zusammen,

in einen absolut positionierten <div>-Container wird eine <ul><li>-Liste eingebettet.

Beim Verlassen dieses absolut positionierten <div>-Containers soll er geschlossen werden.

Dazu habe ich auf das <div ...> ein onmouseout gelegt, welches eine Funktion zum Schließen (bzw. Verstecken) des Containers aufruft.

Problem:

Auch beim Verlassen der Listenelemente wird schon onmouseout gefeuert, was halt jetzt nicht den gewünschten Effekt liefert, denn nur, wenn der umschließende Container verlassen wird, soll er (selber) ja geschlossen werden, nicht aber schon beim Navigieren über die Menü-Punkte. :)

(Getestet u.a. in Firefox und Opera, in beiden das gleiche Symptom.)

Der HTML-Code (zur besseren Übersicht mal mit bisschen Direktformtierung und zum leichteren Debuggen mit "alert" statt der etwas längeren Schließ-Funktion):

..........................................................................

<div id="container" onmouseout="alert('onmouseout');" style="border-width:3px;border-style:solid;border-color:#808080;padding:20px;">
            <ul>
                <li>hase1</li>
                <li>maus1</li>
                <li>storch1</li>
            </ul>
        </div>

..........................................................................

Was muss da anders gemacht werden, damit nur (!) das Verlassen des Containers (hier id="container") abgefangen wird?

Gruß von Bert

___________________________________________________________________
Problem bei onmouseout in <div> mit eingebetteter <ul><li>-Liste

[Matthias Apsel]

Om nah hoo pez nyeetz, Bert!

Auch beim Verlassen der Listenelemente wird schon onmouseout gefeuert,

schau genau!

Nicht beim Verlassen der Listenelemente, sondern beim Verlassen des Divs hin zum Listenelement.

Matthias

[Bert]

Hi Matthias,

Nicht beim Verlassen der Listenelemente, sondern beim Verlassen des Divs hin zum Listenelement.

Das Verhalten kommt jetzt aber gar nicht entgegen. :)

Wie sage ich ihm, dass alles, was im Container eingebettet ist, zum Container gehört oder muss ich da einen weiteren, leeren Container in absoluter Positionierung speziell fürs Funktionieren von "onmouseout" in gewünschter Form drüberlegen...? :)

[ChrisB]

Hi,

Wie sage ich ihm, dass alles, was im Container eingebettet ist, zum Container gehört

Das sagst du „ihm“ gar nicht.
Sondern du schaust dir das Zielelement des Events ab, und prüfst, ob es außerhalb des Elements liegt, oder nicht.
Stichworte: event.target, element.contains()

MfG ChrisB

[Bert]

Sondern du schaust dir das Zielelement des Events ab, und prüfst, ob es außerhalb des Elements liegt, oder nicht.
Stichworte: event.target, element.contains()

Im Endeffekt gings damit, nicht unbedingt naheliegend, das Ganze, man muss schon ein Weilchen probieren, aber hinzubekommen. :) Danke euch!

Als Tip, um eindeutige Verhältnisse zu bekommen:

Mit

e.relatedTarget.getAttribute('class');

(wobei e als Parameter in der Eventhandler-Funktion übergeben wird) kann man z.B. die Klasse des mit Eintreten des Ereignisses anvisierten Elements ermitteln.

[Gernot Back]

Hallo Bert,

Im Endeffekt gings damit, nicht unbedingt naheliegend, das Ganze, man muss schon ein Weilchen probieren, aber hinzubekommen. :) Danke euch!

Als Tip, um eindeutige Verhältnisse zu bekommen:

Mit

e.relatedTarget.getAttribute('class');

(wobei e als Parameter in der Eventhandler-Funktion übergeben wird) kann man z.B. die Klasse des mit Eintreten des Ereignisses anvisierten Elements ermitteln.

Ich mach mir darüber überhaupt keinen Kopf mehr, seit ich die Hover-Funktion von jQuery benutze. Die mouseenter- und mouseleave-Events gibts da auch.

Gruß Gernot