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.

(function () {

    var nodelist = document.getElementsByClassName('ukliste');
    var nodelist_length = nodelist.length;
    
    for (var i = 0; i < nodelist_length; i++) {
        var element = nodelist[i];
        
        element.addEventListener('click', link_detail_click, false);
        
        // Anfragelink
        var anfragelink = element.getElementsByClassName('anfragelink');
        anfragelink[0].addEventListener('click', link_detail_anfrage_click, false);
    }

    function link_detail_click (e)
    {
        var nodelister = this.getElementsByClassName('uklink');
        
        if(nodelister[0] && nodelister[0].href && nodelister[0].href !== undefined)
        {
            var uri = nodelister[0].href;
            window.location = uri;
        }
    }
    
    function link_detail_anfrage_click (e)
    {
        var nodelister = this.getElementsByClassName('uklink');
        
        if(nodelister[0] && nodelister[0].href && nodelister[0].href !== undefined)
        {
            var uri = nodelister[0].href+'anfrage/';
            window.location = uri;
        }
    }
})();

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?

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.

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.

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 ....