auf Child Element prüfen

[tomtom]

Hi Leute,

ich habe folgendes Problem:

<div id="parent" onmouseout="alert('mouseout')">
<div id="child1">test</div>
<div id="child2">1234</div>
<div id="child3">ABCD</div>
</div>

Ich möchte erreichen das wenn ich mit dem Mauszeiger aus dem "parent"-div rausgehe, eine Meldung erscheint.

Funktioniert soweit ganz gut.
Leider erscheint die Meldung auch wenn ich mit dem Mauszeiger zwischen den "child"-divs wechsle.

Hab im Archiv schon eine mögliche Lösung gefunden, da heist es ich müsste vor dem ausgeben der Meldung prüfen, ob der mouseout Event vom "parent"-div oder von einem der Child Elemente ausgelöst wurde.

Leider wird nicht näher darauf eingegangen und ich weiß nicht recht wie ich das anstellen soll.

Hab mit .firstChild experimentiert aber es hat nicht im geringsten funktioniert, außerdem würde ich ja dann nur das erste Element prüfen können.

Wenn hier jemend eine gute Idee hat, ich bin für jeden Rat dankbar.

Mit freundlichen Grüßen

Tom

[molily]

Hallo,

Hab im Archiv schon eine mögliche Lösung gefunden, da heist es ich müsste vor dem ausgeben der Meldung prüfen, ob der mouseout Event vom "parent"-div oder von einem der Child Elemente ausgelöst wurde.

Du musst auf das Event-Objekt zugreifen. Dessen Eigenschaften target (im IE: srcElement) verweist auf das Element, bei dem das Ereignis tatsächlich passierte. Die Event-Eigenschaft currentTarget (konventionell: this) verweist auf das Element, bei dem die Handlerfunktion registriert wurde, die gerade ausgeführt wird.

Wenn du die Maus vom Element child1 zu child2 bewegst, dann passiert ein Mouseout-Ereignisse mit target = child1 und currentTarget = parent. Dich interessieren nur Ereignisse mit target = parent.

Du kannst also abfragen, ob das Target-Element die ID parent hat bzw. ob das Target-Element mit dem Element identisch ist, bei dem der Handler registriert wurde (also das currentTarget).

document.getElementById("parent").onmouseout = mouseout;  
  
function mouseout (e) {  
  // Zugriff auf das Event-Objekt  
  if (!e) {  
    // Wenn nicht W3C-konform als Parameter übergeben, benutze window.event (Microsoft-proprietär)  
    e = window.event;  
  }  
  var target;  
  if (e.target) {  
    // gemäß W3C DOM Events  
    target = e.target;  
  } else if (e.srcElement) {  
    // Microsoft-proprietär  
    target = e.srcElement  
  }  
  if (target == this) {  
    // Mouseout-Ereignis passierte am Element mit id="parent" selbst  
    /* ... Reagiere auf das Ereignis ... */  
  }  
}

Mathias

[tomtom]

Danke Mathias,

es funktioniert tatsächlich.
Anmerkend währe noch zu erwähnen das das "parent"-div einen Rahmen von mindestens 1 Pixel braucht damit der Mauszeiger auch das "parent"-div berührt. Ohne Rahmen ging es bei mir jedenfalls nicht.

Nachmals vielen Dank

Tom