Peter: mouseover bei verschachtelten Elementen

Hallo,

Ich habe folgendes Problem: Wenn ich zwei <div></div> ineinander verschachtle und dem äußeren einen mouseover Event zuweise dann feuert auch der innere einen mouseover. Nach einiger Suche, bin ich darauf gekommen, dass das mit dem Eventbubbling zu tun hat. Ein schönes Beispiel, das mir sehr geholfen hat ist hier zu finden:

http://forum.de.selfhtml.org/archiv/2005/12/t119761/

Jetzt habe ich dieses Beispiel leicht abgeändert und die <div>'s mit css formatiert:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title></title>
<script type="text/javascript">

function log (message) {
 if (typeof log.t == "undefined")
  log.t = document.getElementById("t");
 log.t.value = log.t.value + message + "\n";
}

function over (event) {
 var target = event.target || event.srcElement || false;
 var fromElement = event.relatedTarget || event.fromElement || false;

if (target.id == "outer" && fromElement.id != "inner") {
  log("over  target: " + target.id + "  from: " + fromElement.id);
 } else {
  log("over  target: " + target.id + "  from: " + fromElement.id);
 }
}
function out (event) {
 var target = event.target || event.srcElement || false;
 var toElement = event.relatedTarget || event.toElement || false;

if (target.id == "outer"  && toElement.id != "inner") {
  log("out   target: " + target.id + "  to:   " + toElement.id);
 } else {
  log("out   target: " + target.id + "  to:   " + toElement.id);
 }
}

</script>

<style type="text/css">
#outer {background-color:#000000; position: absolute; top: 50px; left: 600px;}
#inner {background-color:#c0c0c0; position: absolute; top: 0px; left: 0px; width:150px; height: 20px;}
</style>

</head><body id="body">

<div id="outer" onmouseover="over(event)" onmouseout="out(event)">
   <div id="inner">

</div>
</div>

<p><textarea id="t" cols="60" rows="25"></textarea></p>

</body>

</html>

nun bekomme ich als Event nurnoch ein mouseover/mouseout ausgelößt vom inneren <div>.

Wie kann das sein?? Müssten nich zumindest beide <div>'s feuern?

Ich möchte eigentlich nur wissen, wann der Mauszeiger in den äußeren <div> eindringt bzw. diesen wieder verlässt!!

Vielen Dank,

Peter

  1. Hi

    nun bekomme ich als Event nurnoch ein mouseover/mouseout ausgelößt vom inneren <div>.

    Wie kann das sein?? Müssten nich zumindest beide <div>'s feuern?

    Vielleicht, weil das inner-DIV das outer-Div völlig zudeckt? Probier mal mit

    #outer {background-color:#FF0000; position: absolute; top: 50px; left: 600px; width:200px; height: 30px;}  
    
    

    Dann feuert auch das outer-Div.

    1. Hi,

      Danke für die Antwort :)

      Ja, das funktioniert natürlich. Aber ich will eigentlich nur, dass das #outer Div feuert. Das ganze soll mal ein Dropdown Menü werden. der #outer Div legt dabei die position fest. Die #inner Div's sind die Menüpunkte. Das Menü soll einklappen, wenn der Mauszeiger das #outer Div verlässt.

      Vielen Dank,

      Peter

      Hi

      nun bekomme ich als Event nurnoch ein mouseover/mouseout ausgelößt vom inneren <div>.

      Wie kann das sein?? Müssten nich zumindest beide <div>'s feuern?

      Vielleicht, weil das inner-DIV das outer-Div völlig zudeckt? Probier mal mit

      #outer {background-color:#FF0000; position: absolute; top: 50px; left: 600px; width:200px; height: 30px;}

      
      >   
      > Dann feuert auch das outer-Div.
      
  2. Hallo,

    nun bekomme ich als Event nurnoch ein mouseover/mouseout ausgelößt vom inneren <div>.
    Wie kann das sein?? Müssten nich zumindest beide <div>'s feuern?

    Nein. Wenn die Maus #outer nie direkt berühren kann, sondern nur die Boxen deren Kindelemente, ist #outer auch nie Ziel eines mouseover-Events.

    Ich möchte eigentlich nur wissen, wann der Mauszeiger in den äußeren <div> eindringt bzw. diesen wieder verlässt!!

    Allgemein ist ein solches Menü einfacher: </archiv/2006/4/t127058/#m820234>.

    Aber wenn das Elternelement versteckt ist, musst du dir eine andere Strategie ausdenken. Warum musst du Elemente mit position:absolute auch verschachteln? Wieso können die Listenelemente nicht normal im äußeren Element fließen? Wie auch immer - mit target kannst du da nicht operieren, sondern müsstest mit fromElement/toElement arbeiten:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
    <html>  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    <script type="text/javascript">  
    [code lang=javascript]function log (message) {  
     if (typeof log.t == "undefined")  
      log.t = document.getElementById("t");  
     log.t.value = log.t.value + message + "\n";  
    }  
      
    if (window.Node && Node.prototype && !Node.prototype.contains) {  
     Node.prototype.contains = function (arg) {  
      return !!(this.compareDocumentPosition(arg) & 16);  
     };  
    }  
      
    function over (event) {  
     event = event || window.event;  
     var fromElement = event.relatedTarget || event.fromElement || false;  
     if (!navigation.contains(fromElement)) {  
      log("echter mouseover");  
     }  
    }  
    function out (event) {  
     event = event || window.event;  
     var toElement = event.relatedTarget || event.toElement || false;  
     if (!navigation.contains(toElement)) {  
      log("echter mouseout");  
     }  
    }  
    window.onload = function () {  
     navigation = document.getElementById("menu");  
     navigation.onmouseover = over;  
     navigation.onmouseout = out;  
    };
    

    </script>
    <style type="text/css">

    #menu { margin: 0; padding: 0; position: absolute; top: 50px; left: 600px; list-style-position: inside; }  
    #menu li { margin: 0; padding: 0; background-color: #c0c0c0; width: 150px; padding: 5px; }
    

    </style>
    </head><body id="body">

    <ul id="menu">
    <li>Menüpunkt 1</li>
    <li>Menüpunkt 2</li>
    <li>Menüpunkt 3</li>
    <li>Menüpunkt 4</li>
    <li>Menüpunkt 5</li>
    <li>Menüpunkt 6</li>
    </ul>

    <p id="p"><textarea id="t" cols="60" rows="25"></textarea></p>

    </body>
    </html>[/code]

    Da wird einfach darauf geachtet, dass beim direkten (!) Übergang der Maus von der Fläche eines Menüpunktes auf die Fläche eines anderen Menüpunktes kein Mouseover/Mouseout ausgelöst wird. Voraussetzung ist, dass die auch direkt aneinandergrenzen. Ob du das suchst, weiß ich nicht ganz, denn deine position-absolute-Verschachtelung wirft mir Rätsel auf.

    Mathias

    1. Vielen Dank!

      Dein Link zu dem ältern Posting hat mir sehr gehofen! Ich glaube ich versteh jetzt des "Bubbling" und kann entsprechnde Events abfangen.

      mfg,

      Peter