Javascript: Zwei Click-Events übereinander -> Bubbling?

  • So, mal wieder eine Frage. So langsam glaube ich echt, ich stelle mich saudoof an, selbst Google zu benutzen, denn ich finde alles möglich, aber nicht was ich suche :(


    Folgendes, ich halte es mal einfach vom Code her


    Bisher habe ich ein Div mit Bild, Text und einem Link drinnen. Das DIV selbst wird per Eventlistener klickbar gemacht.


    <div>

    <a class="link" href="xyz">Link</a>

    Noch anderes Zeug

    </div>


    Das geht so auch wunderbar, seit Jahren. Man kann das DIV anklicken und landet da wo man soll, aber auch den Link anklicken und landet bei dessen HREF.


    So, nun wollte ich den A-Tag da weg haben und habe den durch ein SPAN ersetzt.



    <div>

    <span class="link">Link</span>

    Noch anderes Zeug

    </div>


    Und auf das SPAN eben innerhalb der bisherigen Listenerfunktion eine weitere für das Span eingebaut. Firefox meldet mir auch, dass auf dem Span der richtige Listener als "click" hinterlegt ist.


    Nur wenn ich den nun anklicke, dann lande ich nicht am Ziel vom SPAN, sondern am Ziel vom DIV.


    e.preventDefault(); und e.stopPropagation(); habe ich in beiden Listenern schon in allen möglichen Kombinationen durch. Es kommt immer das DIV zum Vorzug.


    Das kleine Script dazu. Der zweite Listener und die zweite Funktion sind eben die beiden neuen Dinge nun.


    Hat einer eine Idee, wie ich das aufbauen muss, damit eben das Div an sich klickbar bleibt, aber der "Link", also das SPAN, selbst auch klickbar ist, aber über seinen eigenen Listener?

    Don't judge a book by its cover @ Jadyn Rylee
    "Sogar ein Mann mit reinstem Gemüt, der Gebete sagt jede Nacht, kann zum Wolf werden, wenn die Wolfsblume blüht unter des Mondes goldener Pracht"

  • Von Javascript hab ich soviel Ahnung, wie 'ne Kuh vom Eierlegen.

    Was die css angeht, fallen mir zwei mögliche Ansätze ein:

    1. Liegt der z-index des span über dem div?
    2. Steht das span in der css hinter dem div?

  • Danke erst mal. Musste nun auch suchen, denn auf die Fragen hatte ich so erst mal keine Antwort.


    1. z-Index ist bei beiden nicht definiert. Braucht man den denn eigentlich nicht nur, wenn man verschiedene Ebenen hat, z.B. absolut positioniert und dann eben die hinten nach vorne bringen will oder umgedreht? Mein HTML ist ja in der richtigen Reihenfolge. Der normale Link darin geht ja auch, der ist also von der Ebene her über dem Klick-Event.


    2. Das Span an sich hat aktuell im CSS gar keine Definition. Die Klasse wurde nur für "a" verwendet um dessen Farben zu überschreiben.

    Don't judge a book by its cover @ Jadyn Rylee
    "Sogar ein Mann mit reinstem Gemüt, der Gebete sagt jede Nacht, kann zum Wolf werden, wenn die Wolfsblume blüht unter des Mondes goldener Pracht"

  • Ich werde dann mal wieder zurück auf Anfang gehen und neu anfangen. Irgendwas passt da gar nicht. Nun habe ich Log-Ausgaben für die Console drinnen, damit ich sehe, welcher Event hier zuerst ausgelöst wird und was ist? Ich bekomme keine Log-Ausgaben???


    Also entweder funkt mit hier was anderes dazwischen, was ich noch nicht weiß, oder ich bearbeite die falsche Datei.

    Don't judge a book by its cover @ Jadyn Rylee
    "Sogar ein Mann mit reinstem Gemüt, der Gebete sagt jede Nacht, kann zum Wolf werden, wenn die Wolfsblume blüht unter des Mondes goldener Pracht"

  • Hm, wenn man sich doof anstellt, dann wird das halt auch nix. Im Grunde hatte mein Script die ganze Zeit funktioniert und ich merkte es nicht. Machte immer die Console auf, schaute nach, ob der Listener da ist ist. War er und passte auch. Dann änderte ich die "data-id" direkt im HTML der Console zum testen und damit wurde der Listener dann immer automatisch gelöscht. Klar, dass dann bei einem Klick immer das DIV reagiert. << muss man erst mal wissen ....

    Don't judge a book by its cover @ Jadyn Rylee
    "Sogar ein Mann mit reinstem Gemüt, der Gebete sagt jede Nacht, kann zum Wolf werden, wenn die Wolfsblume blüht unter des Mondes goldener Pracht"