Scraper: Verschachtelte Divs

Hallo zusammen

Ich habe da ein kleines Problem mit verschienden verschachtelten DIV's.

<div id="border" class="border">
  <div id="parent" class="parent">
    <div id="childhead" class="childhead"></div>
    <div id="childbody" class="childbody"></div>
  </div>
</div>

Wenn ich jetzt hier einen Eventlistener oder Eventhandler im untersten Div notiere wird dieser auch ausgeführt wenn sich z.b. bei einem mousover die Maus über den inneren Divs befindet.

Frage: Wie kann ich diesen Effekt unterbinden, d.h. für die einzelnen Divs eigene unabhängige Events notieren oder auch keine?

Vielen Dank für eure Hilfe!

mfg

Scraper

  1. Hallo,

    Ich habe da ein kleines Problem mit verschienden verschachtelten DIV's.

    Wenn ich jetzt hier einen Eventlistener oder Eventhandler im untersten Div notiere wird dieser auch ausgeführt wenn sich z.b. bei einem mousover die Maus über den inneren Divs befindet.

    Frage: Wie kann ich diesen Effekt unterbinden, d.h. für die einzelnen Divs eigene unabhängige Events notieren oder auch keine?

    Die Seite könnte dir Helfen http://www.quirksmode.org/js/eventexample.html

    Grüße
    Thomas

    1. Die Seite könnte dir Helfen http://www.quirksmode.org/js/eventexample.html

      Nö, das Beispiel hilft mir leider nicht, da hier mein Problem keinesfalls gelöst ist. Wenn man hier auf das 2. div klickt, werden die events des 1. divs trotzdem ausgeführt was in meinem fall eben nicht der Fall sein sollte.

      mfg

      scraper

      1. Hallo,

        Nö, das Beispiel hilft mir leider nicht, da hier mein Problem keinesfalls gelöst ist. Wenn man hier auf das 2. div klickt, werden die events des 1. divs trotzdem ausgeführt was in meinem fall eben nicht der Fall sein sollte.

        Dann müssen wir unseren Kristallkugen befragen was du so in deiner Seite am Code stehen hast.
        Oder wie meinst du würden wir es sonst erfahren wie deine  Eventlistener  definiert sind? ;-)

        Grüße
        Thomas

        1. Jaja...

          Das mit der Kristallkugel wäre eine gute Idee für die Lösung meines Problems ;-)

          Nö, mal ernst...
          Sach ist, dass ich bis jetzt nicht sehr viel Code dazu habe. Sache ist, dass ich die ganzen eventlistener nur zu Testzwecken geschrieben haben. Aber ich poste mal den quelltext hier dann kannst dus gleich auch mal testen!

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml">
          <head>
          <title>Test</title>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
           <style type="text/css">
           .border {
            position: absolute;
            top: 100px;
            left: 100px;
            width: 300px;
            height: 50px;
            background-color: #DEDBD6;
            border: 2px solid #848284;
            z-index: 10;
            padding: 1px;
            overflow: hidden;
            cursor: n-resize;
           }
           .parent {
            position: absolute;
            height: 50px;
            width: 300px;
            background-color: #DEDBD6;
            z-index: 20;
            overflow: hidden;
            cursor: default;
           }
           .childhead {
            position: absolute;
            height: 20px;
            width: 300px;
            background-color: #848284;
            z-index: 30;
            overflow: hidden;
           }
           .childbody {
            position: absolute;
            top: 21px;
            height: 30px;
            width: 300px;
            background-color: #DEDBD6;
            z-index: 31;
            overflow: hidden;
           }
              </style>
          <script language="javascript" type="text/javascript">
          function Init() {
           document.getElementById('border').addEventListener('mouseover', Cursor, true);
          document.getElementById('childhead').addEventListener('mousedown', Move, true);
          }

          function Cursor() {
           alert('Hallo Welt');
          }

          function Move() {
           alert('Hello World');
          }
          </script>
          </head>

          <body onload="Init()">

          <div id="border" class="border">
              <div id="parent" class="parent">
            <div id="childhead" class="childhead"></div>
            <div id="childbody" class="childbody"></div>
              </div>
            </div>

          </body>
          </html>

          Wenn du dir mal den Code ansiehst wirst du auch die Absicht dahinter merken ... denke ich mal ;-)

          Auf jeden Fall sollte es so sein dass wenn man auf den div mit der id childhead geht nicht auch noch der Event des divs mit dem border id ausgeführt wird.

          mfg

          scraper

          1. Hallo,

            Wenn du dir mal den Code ansiehst wirst du auch die Absicht dahinter merken ... denke ich mal ;-)

            Nö, ich verstehe nicht wirklich was du damit vorhast .... ??
            (allerdings der IE untersützt kein addEventListener)

            Auf jeden Fall sollte es so sein dass wenn man auf den div mit der id childhead geht nicht auch noch der Event des divs mit dem border id ausgeführt wird.

            Dann solltest du sie nicht verschachteln und für  .childhead  auch position:absolute; top:100px; left:100px; geben solltest.

            Mehr fällt mir leider uch nichts ein.

            Grüße
            Thomas

            1. Das Ding das ja dann im Browser kommt sollta dann verschiebbar sein, daher sollte ich die divs verschachteln.

              Trotzdem Danke für deine Mühe

              mfg

              scraper