Matze: bei klick auf Kind das Eltern-Event feuern

Hallo!

Ich habe einen Textabsatz mit der Klasse "clickme"
<p class="clickme">Das ist ein Hund.</p>.
Mit JavaScript überwache ich die Maus-Klicks und wenn der Klick auf dem/einen Element mit der Klasse erfolgte führt das Script weitere Funktionen aus.

Das funktioniert soweit alles bestens und ohne Probleme.
Wenn ich dem Absatz aber andere Elemente hinzufüge, z.B. <b>:
<p class="clickme">Das ist ein <b>dicker</b> Hund.</p>
wird der Klick natürlich auf dem Element, nicht auf dem Elternelement registriert.
Komplizierter wird es dann mit verschachtelten Kind-Elementen, z.B.
<p class="clickme">Das ist ein <u><b>dicker</b> <i>und</i> fauler</u> Hund.</p>.

Wie schaff ich es mit dem Script abzufragen, ob der Klick auf das Element mit der Klasse "clickme" ODER auf eines seiner Kinder erfolgte?

Vielen Dank!

Matze

  1. Hi,

    Wie schaff ich es mit dem Script abzufragen, ob der Klick auf das Element mit der Klasse "clickme" ODER auf eines seiner Kinder erfolgte?

    In dem du dir anschaust, was das target des Events ist.

    MfG ChrisB

    --
    “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
    1. Hallo ChrisB,

      Wie schaff ich es mit dem Script abzufragen, ob der Klick auf das Element mit der Klasse "clickme" ODER auf eines seiner Kinder erfolgte?
      In dem du dir anschaust, was das target des Events ist.

      also das window.document - Objekt wird auf einen Mausklick überwacht.
      Dann kommt eine einfache if-Abfrage if(e.className == 'clickme'){ alert(e.className); }

      Oder was meinst du mit dem Target?
      Der Event wird halt bei den Kindelementen nicht mehr registriert.

      Vielen Dank!

      Matze

      1. Hi,

        Oder was meinst du mit dem Target?

        Das target des event-Objektes.

        Wie EKKi auch schon sagte - beschäftige dich mit dem Stichwort Bubbling, dabei wirst du auch darauf stossen.

        MfG ChrisB

        --
        “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
        1. Hallo,

          Das target des event-Objektes.

          ich weiß nicht was das ist.

          Wie EKKi auch schon sagte - beschäftige dich mit dem Stichwort Bubbling, dabei wirst du auch darauf stossen.

          Ich konnte leider nichts dazu finden und versteh auch nicht was mein Problem mit dem Bubbling zu tun hat.
          Wenn das innere Element die Funktion des äusseren starten würde wär ich ja zufrieden. Beim Event-Bubbling geht es, wenn ich es richtig verstanden habe, aber darum genau das zu vermeiden.

          Danke, Matze

          1. Hi,

            Das target des event-Objektes.

            ich weiß nicht was das ist.

            Dann probier's mit *suchen*.

            Wie EKKi auch schon sagte - beschäftige dich mit dem Stichwort Bubbling, dabei wirst du auch darauf stossen.

            Ich konnte leider nichts dazu finden

            http://www.google.com/search?q=javascript+event+bubbling

            und versteh auch nicht was mein Problem mit dem Bubbling zu tun hat.
            Wenn das innere Element die Funktion des äusseren starten würde wär ich ja zufrieden. Beim Event-Bubbling geht es, wenn ich es richtig verstanden habe, aber darum genau das zu vermeiden.

            Nein, es geht darum, sich an der richtigen Stelle zu nutze zu machen, *dass* Events im DOM aufsteigen (Bubbling).

            MfG ChrisB

            --
            “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
            1. Hallo,

              Dann probier's mit *suchen*.

              was denkst du was ich gemacht habe?

              http://www.google.com/search?q=javascript+event+bubbling

              Glaubst du mich 3 mal auf Google zu verweisen hilft mir weiter?
              Sagte ich nicht, ich hatte danach gesucht?

              Nein, es geht darum, sich an der richtigen Stelle zu nutze zu machen, *dass* Events im DOM aufsteigen (Bubbling).

              Alles was ich finde beschäftigt sich damit genau das zu vermeiden.

              Wenn du noch etwas genauere Informationen hast wär ich dir dankbar mir diese einfach zu sagen anstatt mich wieder zu Google zu schicken.

              Offenbar bringt es mir ja nicht viel nach Ereignis-Blasen zu suchen.

              Matze

              1. Hi,

                Glaubst du mich 3 mal auf Google zu verweisen hilft mir weiter?
                Sagte ich nicht, ich hatte danach gesucht?

                Ja, aber du hattest absurder Weise auch behauptet, nichts gefunden zu haben.

                Wenn du noch etwas genauere Informationen hast wär ich dir dankbar mir diese einfach zu sagen anstatt mich wieder zu Google zu schicken.

                Mehr Info als die bereits gegebene brauchst du nicht.
                Fange den Event auf einem geeigneten Element ab, und schau dir dann an, was das eigentliche target war.

                MfG ChrisB

                --
                “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
                1. Hallo Chris,

                  Mehr Info als die bereits gegebene brauchst du nicht.
                  Fange den Event auf einem geeigneten Element ab, und schau dir dann an, was das eigentliche target war.

                  kann sein, dass ich mich wiederhole, aber ich krieg es nicht hin den Event-Handler eines Eltern-Elements zu starten wenn ich auf dessen Kind klicke.

                  Anscheinend brauch ich also doch mehr Informationen.

                    
                  function handleMouseDown(e){  
                    var e=(window.event)?window.event:e;  
                    if(e.target.className == 'clickme'){  
                      alert('foobar');  
                    }  
                  }  
                  window.document.addEventListener("mousedown", handleMouseDown, false);  
                  
                  

                  <p class="clickme">bla <b>bla</b> blub</p>

                  Die Funktion wird nich aufgerufen wenn ich innerhalb des b-Elements klicke.
                  Erscheint mir auch irgendwie logisch.

                  Danke, Matze

                  1. Mahlzeit Matze,

                    Anscheinend brauch ich also doch mehr Informationen.

                    Nein, alle notwendigen wurden Dir gegeben. Was Dir fehlt, ist das Verständnis und die richtigen Anwendung.

                    function handleMouseDown(e){
                      var e=(window.event)?window.event:e;
                      if(e.target.className == 'clickme'){
                        alert('foobar');
                      }
                    }

                    Z.B. wurde im Zusammenhang mit "target" auch mehrfach von "srcElement" gesprochen ...

                    window.document.addEventListener("mousedown", handleMouseDown, false);

                    ... andererseits ist diese Methode, Event-Handler hinzuzufügen, ja nicht unbedingt IE-freundlich.

                    <p class="clickme">bla <b>bla</b> blub</p>

                    Die Funktion wird nich aufgerufen wenn ich innerhalb des b-Elements klicke.

                    Wird tatsächlich die Funktion nicht aufgerufen? Oder erscheint nur kein alert()-Fenster? In welchem Browser in welcher Version hast Du das Problem?

                    Erscheint mir auch irgendwie logisch.

                    Wieso?

                    MfG,
                    EKKi

                    --
                    sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
              2. Mahlzeit Matze,

                Dann probier's mit *suchen*.

                was denkst du was ich gemacht habe?

                Tja ... jedenfalls offensichtlich weder sinnvoll gesucht noch Dir die Mühe gemacht, die Ergebnisse zu verstehen. Wenn ich genau die Wortkombination, die ChrisB genannt hat, bei der allwissenden Müllhalde eintippe, bekomme ich eine ansehnliche Anzahl von brauchbaren Links.

                Wenn ich die Suche sogar noch auf Seiten innerhalb von SELFHTML einschränke, sollten keine Fragen mehr offen bleiben ... gesetzt den Fall, Du bist willens und in der Lage, zu lesen und zu verstehen.

                Was genau ist Dein Problem mit http://de.selfhtml.org/dhtml/modelle/dom.htm#event_handling@title=target bzw. http://de.selfhtml.org/dhtml/modelle/microsoft.htm#event_handler@title=srcElement?

                Du wurdest auf beide Stichwörter bereits hingewiesen. Aber anstatt Dich darüber zu informieren und konkrete Nachfragen zu stellen, quengelst Du wie ein kleines Kind, dem man nicht alles vorkaut ...

                Sagte ich nicht, ich hatte danach gesucht?

                Doch, sagtest Du. Du sagtest aber nicht, welches *konkrete* Problem Du bei der Umsetzung hast.

                Nein, es geht darum, sich an der richtigen Stelle zu nutze zu machen, *dass* Events im DOM aufsteigen (Bubbling).

                Alles was ich finde beschäftigt sich damit genau das zu vermeiden.

                Dann solltest Du ja eigentlich daraus schließen, dass es normalerweise stattfindet - und dass Du also nur noch herausfinden musst, welches Element den Event ausgelöst hat. Und wie das funktioniert, wurde Dir bereits mehrfach unter die Nase gerieben. Welches *konkrete* Problem hast Du also damit?

                Wenn du noch etwas genauere Informationen hast wär ich dir dankbar mir diese einfach zu sagen anstatt mich wieder zu Google zu schicken.

                Du hast alle notwendigen Informationen erhalten, um Dich umfassend informieren zu können.

                Offenbar bringt es mir ja nicht viel nach Ereignis-Blasen zu suchen.

                [ ] Du hast verstanden, um was es sich bei "Event Bubbling" handelt.

                MfG,
                EKKi

                --
                sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
                1. Hallo EKKI,

                  erklär mir doch bitte wie ich ein Element, das ich nur anhand seiner Klasse indentifizieren kann, auf ein Ereignis überwache, wenn das Ereignis bei dessen Kind stattfindet, und das ganze so, dass ich das Element mit der Klasse danach ansprechen kann.

                  Ich glaub, so könnte ich mein Problem auch formulieren.

                  Grüße, Matze

                  1. Mahlzeit Matze,

                    erklär mir doch bitte wie ich ein Element, das ich nur anhand seiner Klasse indentifizieren kann,

                    Das mit der Klasse ist irrelevant.

                    auf ein Ereignis überwache,

                    Indem Du ihm einen entsprechenden Event-Handler gibst.

                    wenn das Ereignis bei dessen Kind stattfindet,

                    Im Normalfall sollten Events zum jeweiligen Elternelement aufsteigen, insofern musst Du Dich darum nicht gesondert kümmern.

                    und das ganze so, dass ich das Element mit der Klasse danach ansprechen kann.

                    Auch das ist wieder eine irrelevante Information.

                    Ich glaub, so könnte ich mein Problem auch formulieren.

                    Das mag sein - es wird trotzdem nicht verständlicher. Insbesondere fehlt immer noch eine konkrete Problembeschreibung samt genauen Anweisungen zu Browser und -version, eventuellen Fehlermeldungen usw. ...

                    In welchen Browsern funktioniert das Beispiel aus Deinem anderen Beitrag? In welchen passiert was *genau*? Was steht jeweils in der Fehlerkonsole?

                    MfG,
                    EKKi

                    --
                    sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
                    1. Hallo EKKI,

                      erstmal danke für deine Geduld.
                      Also hier nochmal der komplette Code per Copy&Paste (jetzt auch mit srcElement):

                        
                      function handleMouseDown(e){  
                      	var e=(window.event)?window.event:e;  
                      	var o=(window.event)?e.srcElement:e.target;  
                      	if(o.className == 'clickme'){  
                      		alert(o.nodeName);  
                      	}  
                      }  
                      window.document.addEventListener("mousedown", handleMouseDown, false);  
                      
                      

                      <p class="clickme">dünn <b>dick</b> dünn</p>

                      Getestet im FF 3.5.5 unter Windows.

                      Beim Klick auf "dünn" kommt die Alert-Box, beim Klick auf "dick" nicht.
                      Die Fehlerkonsole schweigt.

                      Und wieso ist diese Methode nicht IE-freundlich?

                      Danke, Matze

                      1. Mahlzeit Matze,

                        Beim Klick auf "dünn" kommt die Alert-Box, beim Klick auf "dick" nicht.

                        OK, so langsam verstehe ich Dein Problem:

                        Wenn Du auf "dünn" klickst (d.h. also das Element <p class="clickme">, dann ist dieser Absatz das Element, das den Event auslöst. In Deiner Funktion fragst Du das Element ab, das den Event ausgelöst hat, bekommst in diesem Fall also den Absatz. Wenn dieses Element jetzt eine bestimmte Klasse hat (in diesem Fall gegeben), erscheint die Meldung.

                        Wenn Du hingegen auf das "dick" klickst (d.h. also das Element <b>), dann ist dieses <b> das Element, das den Event auslöst. Es hat nicht die Klasse "clickme", also wird die Meldung auch nicht erscheinen.

                        Du müsstest ausgehend von dem Element, das den Event ausgelöst hat, im DOM <http://de.selfhtml.org/javascript/objekte/node.htm#parent_node@title=nach oben klettern> und schauen, ob irgendein (Groß-)Elternelement die genannte Klasse hat.

                        Die Fehlerkonsole schweigt.

                        Natürlich - schließlich ist kein Fehler aufgetreten.

                        Getestet im FF 3.5.5 unter Windows.

                        Funktioniert bei mir genauso wenig wir bei Dir ... hm.

                        Und wieso ist diese Methode nicht IE-freundlich?

                        Weil nicht jede IE-Version die Methode "addEventListener()" kennt.

                        MfG,
                        EKKi

                        --
                        sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
                        1. Hallo EKKI,

                          Du müsstest ausgehend von dem Element, das den Event ausgelöst hat, im DOM <http://de.selfhtml.org/javascript/objekte/node.htm#parent_node@title=nach oben klettern> und schauen, ob irgendein (Groß-)Elternelement die genannte Klasse hat.

                          Wie mach ich das am besten?
                          Kai345 meinte ich solle die Elemente in einer while-Schleife den DOM-Baum nach oben durchlaufen bis entweder ein Element mit der Klasse oder body erreicht wurde - oder das Element selbst schon die Klasse besitzt natürlich.

                          Wie müsste ich so eine while-Schleife aufbauen, dass sie die Elemente nach oben durchläuft?
                          In die Schleife müsste dann wohl die if-Anweisung und ein Schleifenabbruch, das sollte ich dann wieder alleine schaffen.

                          Danke, Matze

                          1. Hallo Matze!

                            Wie mach ich das am besten?

                            Stichwort: parentNode?

                            Viele Grüße aus Frankfurt/Main,
                            Patrick

                            --
                            _ - jenseits vom delirium - _

                               Diblom   [link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
                            J'ai 10 ans! | Achtung Agentur! | Nichts ist unmöglich? Doch! | Heute schon gegökt?
                            1. Hallo Patrick,

                              Wie mach ich das am besten?
                              Stichwort: parentNode?

                              Die Frage war "wie", nicht "womit"!
                              Bis zu while und parentNode sind wir ja nun schon vorgedrungen.
                              Kannst aber auch gern nochmal Event-Bubbling in den Raum werfen.

                              Danke, Matze

                              1. Hallo Matze!

                                Die Frage war "wie", nicht "womit"!

                                Hm, habe mir Dein Ausgangsposting noch mal angeschaut. Erstens ist es mir nicht ganz verständlich, warum, wenn Du in der Tat nur ein Klick-Ereignis überwachen willst, Du dann nicht mit onclick arbeitest:

                                el.onclick = function() { tu_was... }

                                Bis zu while und parentNode sind wir ja nun schon vorgedrungen.

                                Ja und wo ist dann das Problem?

                                Ich habe Anfang des Jahres ein ziemlich komplexes Teil nachprogrammiert (anfangs wollte der Auftraggeber nur, dass ich sein Skript korrigiere - so kann's enden ;)), in dem es u.a. darum ging, TabellenZEILEN mit Formulardaten zu generieren, zu löschen und zu »moven«. Summenberechnungen wie MwSt. inkl./exkl., Rabattabzug, Artikelmengen o.Ä. kamen noch hinzu. Etwa so: Hat der User eine Zeile ausgefüllt, soll - und nur dann - eine weitere, zum ausfüllen bereite Zeile erscheinen. Zeilen dürfen gelöscht werden sowie nach oben oder nach unten bewegt werden. Jede Zeile hat eine Positionsnummer, die beim Löschen oder Moven natürlich angepasst werden muss.

                                Stell Dir also eine Tabellenzeile vor mit als erster Zellen-inhalt die Pos-Nr., etliche weiteren Zellen mit Inputs oder Selects für die User-Eingaben, und als vorletzte und letzte Zelle einen Move- und einen Lösch-Button.

                                Aufgabe: Beim Klicken aufs Löschbutton soll die Zeile gelöscht werden.

                                Dialog: Löschbutton: "Hilfe, User hat mich angeklickt, was nun?... hm, wo bin ich überhaupt? Wo sind meine Eltern, wo sind deren Eltern?":

                                var dieZelle = loeschbutton.parentNode; // -> seine Zelle
                                var dieZeile = loeschbutton.parentNode.parentNode // -> seine Zeile
                                var alleZellenDerZeile = loeschbutton.parentNode.parentNode.getElementsByTagName('td') // -> alle Zellen dieser Zeile
                                var position = alleZellenDerZeie.getElementsByTagName('td')[0].firstChild.data;

                                Die Löschfunktion benötigt noch den tbody:

                                var derTBody = dieZeile.parentNode; // (oder: loeschbutton.parentNode.parentNode.parentNode)

                                um löschen zu können:

                                derTBody.removeChild(dieZeile);

                                Vielleicht ist Dir dies ein Denkanstoß, ansonsten müsstest Du konkreter werden: was hast Du versucht, woran scheitert es?

                                Kannst aber auch gern nochmal Event-Bubbling in den Raum werfen.

                                Das tu ich nicht, da ich mich nicht weitgehend genug damit beschäftigt habe :)

                                Viele Grüße aus Frankfurt/Main,
                                Patrick

                                --
                                _ - jenseits vom delirium - _

                                   Diblom   [link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
                                J'ai 10 ans! | Achtung Agentur! | Nichts ist unmöglich? Doch! | Heute schon gegökt?
                                1. Hallo Patrick,

                                  Hm, habe mir Dein Ausgangsposting noch mal angeschaut. Erstens ist es mir nicht ganz verständlich, warum, wenn Du in der Tat nur ein Klick-Ereignis überwachen willst, Du dann nicht mit onclick arbeitest:

                                  Weil ich, wenn es soweit funktioniert, mit onmousedown einen Timer starte, den ich dann mit onmouseup wieder abbreche.
                                  Könnte gut sein, dass das auch mit onclick funktioniert, die Wahl des onmousedown-Events schien mir allerdings logischer wenn man dessen Verhalten betrachtet.
                                  Ein onclick impliziert mir ein mousedown+mouseup.

                                  Vielleicht ist Dir dies ein Denkanstoß, ansonsten müsstest Du konkreter werden: was hast Du versucht, woran scheitert es?

                                  Es scheitert daran, dass die Kindelemente verschachtelt sein können.
                                  Es kann also sein, dass der Absatz auch so aussieht:
                                  <p class="clickme">dünn <a href="..."><b>dick</b></a> dünn</p>

                                  Mal abgesehen vom Sinn des Konstruktes dient es nur als Beispiel.

                                  Ich kann also nicht so einfach auf das nächste Elternteil springen weil ich nicht weiß ob das geklickte Element Kind, Enkel oder Ur-Ur-Enkel des Elements mit der Klasse "clickme" ist.

                                  Daher die Schleife. Kai345s Vorschläge gefallen mir recht gut, damit werde ich mich erstmal beschäftigen. Morgen, jetzt ist es Zeit zum schlafen ;)

                                  Das tu ich nicht, da ich mich nicht weitgehend genug damit beschäftigt habe :)

                                  Sorry, war nur eine blöde Anspielung. Ich war mir irgendwann irgendwie sicher dass es damit nichts zu tun hat.

                                  Grüße, Matze

                                  PS: Ich hatte einmal eine ähnliche Aufgabe mit so einer Tabelle.
                                  An der Umsetzung mit JS bin ich gescheitert, an der mit PHP auch, also musste ich es sein lassen und hab stattdessen Sortiernummern eingefügt die man per Hand ändern muss.

                                  Das Problem bei mir war eine Formel/Funktion zu schreiben, die ein Element zwischen 2 andere schiebt und die ID aller anderen Elemente entsprechend anpasst. Ich weiß immernoch nicht wie man sowas löst ;)

                              2. [latex]Mae  govannen![/latex]

                                Die Frage war "wie", nicht "womit"!
                                Bis zu while und parentNode sind wir ja nun schon vorgedrungen.
                                Kannst aber auch gern nochmal Event-Bubbling in den Raum werfen.

                                Ich hatte da an eine Konstruktion wie

                                var el = .... // hier das Target-Element des Events bestimmen  
                                while (el.className !== 'wunschklasse' && el !== document.body) { // test auf document.body, um Endlos-Schleifen zu vermeiden  
                                  el = el.parentNode;  
                                }  
                                // wenn die Schleife beendet wurde, ist el entweder das gesuchte Element oder document.body  
                                if (el.className === 'wunschklasse') { // erneut auf className testen, um Schleifenabbruch bei document.body auszufiltern  
                                  // Aktionen  
                                }
                                

                                gedacht. [vereinfachtes Beispiel, wenn mehrere Klassen gesetzt sein können, muß die className-Abfrage entsprechend geändert werden]

                                Oder wie gesagt mit contains auf die vorher ermitteten Elemente oder direkt compareDocumentPosition herumspielen.

                                Cü,

                                Kai

                                --
                                A workaround for an avoidable problem often adds clutter and overhead to the program which
                                could have been avoided by not creating the problem in the first place.(Garrett Smith/clj)
                                Foren-Stylesheet Site Selfzeug JS-Lookup
                                SelfCode: sh:( fo:| ch:? rl:( br:< n4:( ie:{ mo:| va:) js:| de:> zu:) fl:( ss:| ls:?
                                1. [latex]Mae  govannen, Ingrid![/latex]

                                  while (el.className !== 'wunschklasse' && el !== document.body) { // test auf document.body, um Endlos-Schleifen zu vermeiden

                                  Du schreibst -wie fast immer- Unsinn. Wenn die Schleife über document.body weiter nach „oben“ hinausläuft, wird el.parentNode irgendwann null zurückgeben und das Script unwürdevoll per TypeError sterben lassen, statt eine Endlos-Schleife zu produzieren.

                                  Cü,

                                  Kai

                                  --
                                  A workaround for an avoidable problem often adds clutter and overhead to the program which
                                  could have been avoided by not creating the problem in the first place.(Garrett Smith/clj)
                                  Foren-Stylesheet Site Selfzeug JS-Lookup
                                  SelfCode: sh:( fo:| ch:? rl:( br:< n4:( ie:{ mo:| va:) js:| de:> zu:) fl:( ss:| ls:?
                                  1. Hallo Kai345!

                                    while (el.className !== 'wunschklasse' && el !== document.body) { // test auf document.body, um Endlos-Schleifen zu vermeiden

                                    Danke, du hast mir sehr geholfen!

                                    Du schreibst -wie fast immer- Unsinn. Wenn die Schleife über document.body weiter nach „oben“ hinausläuft, wird el.parentNode irgendwann null zurückgeben und das Script unwürdevoll per TypeError sterben lassen, statt eine Endlos-Schleife zu produzieren.

                                    Ich hab erst nicht verstanden was du meintest bis ich es probiert habe.
                                    Ich habe es jetzt && el.nodeName !== 'body' und || el.nodeName == 'body' versucht aber auch da ist el irgendwann null.
                                    Wie kann ich die Schleife denn beim erreichen von <body> abbrechen?

                                    Danke, Matze

                                    1. Hi,

                                      Ich habe es jetzt && el.nodeName !== 'body' und || el.nodeName == 'body' versucht aber auch da ist el irgendwann null.

                                      Letzteres ist ja nichts schlimmes - nur darfst du dann keine Eigenschaften mehr abfragen, die null natürlich nicht hat.

                                      Wie kann ich die Schleife denn beim erreichen von <body> abbrechen?

                                      Sie weiterlaufen lassen, wenn el !== document.body ist.

                                      Und, siehe oben, erst prüfen, ob überhaupt noch ein (HTML-Element-)Objekt vorliegt, bevor auf Eigenschaften wie nodeName oder className zugegriffen wird.

                                      MfG ChrisB

                                      --
                                      “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
                                      1. Hallo ChrisB,

                                        Letzteres ist ja nichts schlimmes - nur darfst du dann keine Eigenschaften mehr abfragen, die null natürlich nicht hat.

                                        Also muss ich in der while-Schleife ein break einbauen wenn body erreicht ist?

                                        while(el.el.className !== 'clickme'){  
                                          el = el.parentNode;  
                                          if(el.nodeName === 'body') break;  
                                        }
                                        

                                        Danke, Matze

                                        1. Hi,

                                          Also muss ich in der while-Schleife ein break einbauen wenn body erreicht ist?

                                          Das kannst du auch gleich in die Weiterlaufbedingung der Schleife einbauen - so lange weiterlaufen, wie das Element *nicht* body ist und ...

                                          MfG ChrisB

                                          --
                                          “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
                                      2. Hallo!

                                        Ach bin ich blöd. Ich dachte die ganze Zeit der zweite Kommentar von Kai345 bezog sich auf den Code, nicht den Kommentar dazu -.-
                                        Ja so funktioniert es natürlich.

                                        Mein Problem ist also gelöst.

                                        Herzlichen Dank für eure Hilfe!

                                        Grüße, Matze

  2. Mahlzeit Matze,

    Wie schaff ich es mit dem Script abzufragen, ob der Klick auf das Element mit der Klasse "clickme" ODER auf eines seiner Kinder erfolgte?

    Zusätzlich zu ChrisBs Hinweis könnte es hilfreich sein, wenn Du Dich zum Thema "Event Bubbling" informierst.

    MfG,
    EKKi

    --
    sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
  3. Hi,

    wird der Klick natürlich auf dem Element, nicht auf dem Elternelement registriert.

    Nein in beiden, siehe:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    <head>
    </head>
    <body>
        <div onclick="alert('div')">
            <p onclick="alert('p')">klick</p>
        </div>
    </body>
    </html>

    Wie schaff ich es mit dem Script abzufragen, ob der Klick auf das Element mit der Klasse "clickme" ODER auf eines seiner Kinder erfolgte?

    Zum target wurde ja schon was gesagt...

    Gruesse, Joachim

    --
    Am Ende wird alles gut.
  4. [latex]Mae  govannen![/latex]

    Wie schaff ich es mit dem Script abzufragen, ob der Klick auf das Element mit der Klasse "clickme" ODER auf eines seiner Kinder erfolgte?

    Du könntest über target (IE: srcElement) das geklickte Element ermitteln und dann in einer while-Schleife jeweils das Elternelement und dessen Klasse ermitteln, bis entweder der Klassen-Name gefunden wurde oder document.body erreicht ist.

    Oder du sammelst die Elemente mit der gewünschten Klasse einmal bei onload o.ä. ein (dies kannst du für neuere Browser mit document.querySelectorAll('.clickme') oder ansonsten document.getElementsByClassName bzw. einen entsprechende Ersatzfunktion) und fragst dann in einer Schleife diese Elemente ab, ob sie das target-Element enthalten. Dazu gibt es die Methode contains. Struppi oder molily haben hier auch mal eine Ersatzfunktion für Browser, die contains nicht von Haus aus kennen, gepostet.

    Die zweite Methode ist dann aber nicht 'live', d.h. wenn du dynamisch weitere Elemente mit dieser Klasse einfügst, werden diese nicht berücksichtigt

    Cü,

    Kai

    --
    A workaround for an avoidable problem often adds clutter and overhead to the program which
    could have been avoided by not creating the problem in the first place.(Garrett Smith/clj)
    Foren-Stylesheet Site Selfzeug JS-Lookup
    SelfCode: sh:( fo:| ch:? rl:( br:< n4:( ie:{ mo:| va:) js:| de:> zu:) fl:( ss:| ls:?