Bubbling in Button auf Spans funktioniert nicht

Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

Jan-Frederik Stieler

Monsterator
Moderator
Ich hab n doofes Problem mit einem button der als Hamburgermenu herhalten muss
HTML:
<button class="burger" aria-label="Toggle navigation" id="burgerBtn">
    <span class="burger__line">
    :before
    :after
    </span>
</button>

Ich hab das Problem das auf den burger__line spans der clickevent nicht greift.
Das ist echt merkwürdig.

Javascript:
burgerBtn.addEventListener('click', (event) => {
        event.preventDefault();

        if (mainMenu.classList.contains('fadein')) {
            mainMenu.classList.remove('fadein');
            mainMenu.style.display = 'none';
            // mainMenuLi.forEach((li, index, array) => {
            //     if (index === array.length - 1) {
            //         li.addEventListener('animationend', (event) => {
            //             mainMenu.style.display = 'none';
            //         });
            //     }
            // });
        }
        else {
            mainMenu.style.display = 'flex';
            mainMenu.classList.add('fadein');
        }

        if (burgerBtn.classList.contains('hover')) {
            burgerBtn.classList.remove('hover');
        }
        else {
            burgerBtn.classList.add('hover');
        }
    });
Vielleicht hat ja einer eine Idee warum das Bubbling nicht richtig funktioniert?
 
Zuletzt bearbeitet:

basti1012

Erfahrenes Mitglied
Das
Code:
burgerBtn.addEventListener('click', (event) => {
Finde ich persönlich nicht so gut.
Dann lieber so
Code:
var burger_ele=document.getElementById('burgerBtn');
burger_ele.addEventListener('click', (event) => {
Ich bin mir nicht mehr ganz sicher, aber glaube das deine Variante nicht bei jeden Browse läuft . Könnte aber auch falsch liegen.


Mit dem gezeigten Code komme ich nicht weiter, das geht so bei mir.
Man müsste vielleicht mal ein live Beispiel machen.
Könnte ja sein das der Button durch der CSS, ein pointer-event-none hat , oder sonst irgendwas.

Hast du mal versucht den click direkt auf die spans zu setzen und nicht auf den Button?
Zb so
Javascript:
var burger_ele=document.querySelector('#burgerBtn > span');
burger_ele.addEventListener('click', (event) => {
        event.preventDefault();
alert('click')
});
 
Zuletzt bearbeitet:

Jan-Frederik Stieler

Monsterator
Moderator
Hi,
was findest Du persönlich nicht so gut? Das die Konstante wie die ID lautet oder das ich das Camelcase Geschrieben habe?
Const und Let sind ja inzwischen von allen wichtigen Browsern unterstützt.

Ja den Click auf die Span überprüfen sollte ich.
Ein pointerevent hab ich nicht gesetzt. Aber vielleicht hat das Mini CSS Framework was ich da drinn hab noch was drinnen. Aber ich bin eigentlich alles an CSS durchgegangen und konnte nichts finden.

Dann prüf ich nochmal.

Danke und Grüße

EDIT: Also der clickevent wird auch auf den spans und Pseudoelementen empfangen aber löst nichts aus.
man sieht auch wie in den DevTools die Elemente aufblicken. Aber es werden die notwendigen Klassen nicht hinzugefügt.
 
Zuletzt bearbeitet:

Jan-Frederik Stieler

Monsterator
Moderator
Hi,
hab rausgefunden wo mein Fehler lag:
Code:
    window.addEventListener('click', function (event) {
        if (event.target !== burgerBtn) {
            mainMenu.classList.remove('fadein');
            mainMenu.style.display = 'none';
            burgerBtn.classList.remove('hover');
        }
    });
Das hatte ich hinzugefügt um das Menü wieder zu schließen. Das da natürlich die Span mit dazugehören hab ich nicht berücksichtigt.
 
Status
Dieses Thema wurde gelöst! Zur Lösung gehen…