onmouseout im Firefox feuert falsch

[Samuel Richter]

Hallo

ICh habe ein Problem mit einem Onmouseout-Effekt im Firefox.

Ich zog ein DIV-Layer auf (div1) und dieses bekam ein weiteres DIV hineingelegt (div2) mit einem Bild.

Das div1 hat ein onmouseout, dass wenn man es verlässt, es sich schliesst. Geht man aber in dem div1 über das div2 verschwindet es auch.

Ich suchte dazu bei google und fand diesen Thread:
http://forum.de.selfhtml.org/archiv/2005/1/t98086/

Aber daraus wurde ich nicht schlau. Wie umschiffe ich das denn, dass man sagt, dass div2 nur ein Kindobjekt von div01 ist und ergo div2 onmouseover == div3 onmouseover ist =/

Auf der Seite ist ein Beispiel, aber das ist sehr komplex und ich steige da nicht hinter. Hat jemand vielleicht ein weniger komplexes BEispiel wo ich den Code mal sehen kann?

Grüße

[suit]

ich fasse mal zusammen was ich von dem verstanden habe, was du eigentlich willst:
hä?

beschreibe dein problem so, dass es der potentiell helfende versteht

reduziere dein problem auf den wesentlichen teil (3 zeilen innerhalb des body-elements)

  
<div id="div1">  
  <div id="div2" onmouseout="this.style.display='none';"><img src="example.png" alt="" /></div>  
</div>  

btw: den rest (das html-grundgerüst) solltest du natürlich zum testen einfügen

[Samuel Richter]

Ok, sorry... ich dachte das wäre verständlich gewesen.

Ich probiere es nochmal:

function hdiv(idn){
        //Müsst ihr nicht genauer beachten, da nur wichtig ist
        //wann hdiv(gefeuert wird. Dies heir versteckt den Layer wieder.
 new Effect.Fade('logo_div_'+idn, {duration: 0.5});
 new Effect.MoveBy('logo_div_'+idn, -720, 0 , {duration: 0.7,  transition: Effect.Transitions.EaseFromTo});
}

<div id="logo_div_1" class="logo_div" onmouseout="hdiv('logo_div_1')">
    <div class="focus_logo"><img src="95.color.png".color.png" width="220" height="220" border="0" alt="" /></div>
</div>

(Ich kann nicht das original posten, da es alles via PHP generiert wird und das nur verwirren würde, aber dies heir ist das was gemacht werden soll).

Also:
ICh habe wie gesagt den äusseren DIV-Layer (zur unterscheidung nenne ich sie im folgenden bei ihrem class-name) namens 'logo_div' und den inneren namens 'focus_logo'.

logo_div hat ein onmouseout, dass ihn verschwinden lässt wenn man das div verlässt. Das Problem ist dass wenn das layer aufgemacht wird (wie das passiert ist trivial) und man aber über focus_logo geht... er den onmouseout vom logo_div feuert und der layer verschwindet, obgleich(!) die Maus sehr wohl noch innerhalb des DIV-LAyer gewesen wäre, nur eben in einem anderen DIV, innerhalb von logo_div.

Ich hoffe das war erklärend.

Grüße

[Harlequin]

Yerf!

logo_div hat ein onmouseout, dass ihn verschwinden lässt wenn man das div verlässt. Das Problem ist dass wenn das layer aufgemacht wird (wie das passiert ist trivial) und man aber über focus_logo geht... er den onmouseout vom logo_div feuert und der layer verschwindet, obgleich(!) die Maus sehr wohl noch innerhalb des DIV-LAyer gewesen wäre, nur eben in einem anderen DIV, innerhalb von logo_div.

Works as designed. Du bewegst die Maus auf ein anderes Element, damit triggern onmoueseover / -out, auch wenn das ein Kindelement ist.

Dir wird nichts anderes übrigbleiben, als das per Programmlogik abzufangen. Schau mal hier im Forumsarchiv, wir hatten da vor nicht all zu langer Zeit schon mal eine Diskussion darüber.

Gruß,

Harlequin

[Samuel Richter]

Wie kann ich denn in Js abfragen ob die mouseonmouseover ist

Weil wenn man das nur Programmierlogisch lösen kann würde ich sagen mache ich einfach eine abfrage die bei onmouseout schaut ob die mouse nicht vielleicht auf dem anderen div ist. Wenn sie es ist dann cancelt er das hide ansonsten führt er es aus.

Aber  if(document.getElementById('test').onmouseover)  wird jawohl nicht gehen, oder?

Hat denn niemand ein Beispiel. Ich kann doch nicht der erste sein dem dieses Problem zu teil wird.

Grüße

[molily]

Hallo,

Weil wenn man das nur Programmierlogisch lösen kann würde ich sagen mache ich einfach eine abfrage die bei onmouseout schaut ob die mouse nicht vielleicht auf dem anderen div ist.

Ja, dafür gibt es die Event-Objekt-Eigenschaft toElement bzw. relatedTarget. Da ist eine Referenz auf das Elementobjekt des anderen div gespeichert, auf dessen Fläche die Maus wechselt.

Aber  if(document.getElementById('test').onmouseover)  wird jawohl nicht gehen, oder?

JavaScript arbeitet eventbasiert, nicht statusbasiert.
Du kannst natürlich bei einem mouseover- bzw. mouseout-Event eine Eigenschaft mausBefindetSichGeradeHier = true bzw. = false setzen und später abfragen, aber ich wüsste nicht, wie dir das bei deinem Problem weiterhilft.
Zuerst passiert der mouseout beim äußeren div, dann der mouseover beim inneren. Da musst du zwangsläufig mit toElement bzw. relatedTarget beim ersten mouseout-Event arbeiten.

Mathias

[molily]

Hallo,

Wie umschiffe ich das denn, dass man sagt, dass div2 nur ein Kindobjekt von div01 ist und ergo div2 onmouseover == div3 onmouseover ist =/

Eigentlich sind mouseover und mouseout für diese Aufgabe nicht geeignet, es gibt stattdessen mouseenter und mouseleave. Diese Events leisten das, was du eigentlich willst, aber sie sind noch nicht browserübergreifend unterstützt.

Wenn man also mit mouseover/mouseout arbeiten will, muss man beim mouseout abfragen, ob das Element, zu dem sich die Maus bewegt, im äußeren Element enthalten ist. Und beim mouseover abfragen, ob das Element, von dem die Maus kommt, nicht im äußeren Element enthalten ist.

Ist eigentlich ganz logisch. Die Umsetzung ist etwas schwieriger. Diese besagten Elemente bekommt man über das Event-Objekt heraus, aber je nach Browser unterschiedlich. Die Abfrage, ob ein Element in einem anderen enthalten ist, bedarf auch einiger Browser-Nivellierungen. Ich hatte mal einige Beispiele gemacht:

onMouseover bei verschachtelten Elementen
Die kunterbunte Welt des Event-Handlings
mouseover bei verschachtelten Elementen

(Fang am besten hinten an, das ist das aktuellste, die ersten beschreiben die Hintergründe.)

Mathias

[Joachim]

Hi,

Das div1 hat ein onmouseout, dass wenn man es verlässt, es sich schliesst. Geht man aber in dem div1 über das div2 verschwindet es auch.

Wie bereits erwähnt musst Du prüfen ob feuerndes Element sich innerhalb Deines Öffnenden Elementes befindet. Eine weitere Hilfe könnte Dir dieses Testscript sein, insbesondere die Funktionen checkMouseEnter und containsDOM. Letztere erledigt für Gecko das, was mit contains() im IE bereits verfügbar ist.

Gruesse, Joachim

[molily]

Hallo,

Letztere erledigt für Gecko das, was mit contains() im IE bereits verfügbar ist.

Die ist ein bisschen eleganter und vermutlich schneller:

if (window.Node && Node.prototype && !Node.prototype.contains) {  
 Node.prototype.contains = function (arg) {  
  return !!(this.compareDocumentPosition(arg) & 16);  
 };  
}

Dann haben alle Elemente die contains-Methode.

Warum ist eigentlich die Sonderabfrage für Safari nötig?

event =  event | window.event; - Funktioniert das genauso wie ||?

Mathias

[Joachim]

Hi Mathias,

if (window.Node && Node.prototype && !Node.prototype.contains) {
Node.prototype.contains = function (arg) {
  return !!(this.compareDocumentPosition(arg) & 16);
};
}

sehr schön, das muss ich mir mal ansehen!

Warum ist eigentlich die Sonderabfrage für Safari nötig?

ist eine Weile her, ich erinnere das nicht genau... seltsamerweise lief Safari hier in den falschen Zweig und verursachte dennoch einen Fehler.

event =  event | window.event; - Funktioniert das genauso wie ||?

nein, gar nicht, denn es ist ein bug *arrrgs*
Möglicherweise rührt da das Safari Problem her, das teste ich heute Abend mal...

Gruesse, Joachim