diff --git a/src/components/ProductCard.astro b/src/components/ProductCard.astro index 7494b37..1962724 100644 --- a/src/components/ProductCard.astro +++ b/src/components/ProductCard.astro @@ -101,6 +101,14 @@ const desc = product.beschreibung[lang]; dots.forEach((dot, i) => dot.classList.toggle("is-active", i === clamped)); } + // WICHTIG: Capture-Phase (letztes Argument "true"), NICHT die normale Bubble-Phase — sonst + // gewinnt Astros (siehe Layout.astro) das Wettrennen: der ist schon im + // registriert und fängt Klicks auf den umschließenden -Link BEVOR + // dieser Handler hier (Bubble-Phase würde erst NACH ClientRouter laufen) überhaupt + // preventDefault() aufrufen kann — genau das führte zu dem Bug, dass ein Klick auf den + // Bildwechsel-Pfeil kurz das zweite Foto zeigte und dann trotzdem sofort zur Produktseite + // weiterspringt. Capture-Phase auf document läuft IMMER vor jeder Bubble-Phase-Verarbeitung + // (auch vor ClientRouters eigenem Listener), genau wie beim Wisch-Sperr-Handler weiter unten. document.addEventListener("click", (e) => { const target = e.target as HTMLElement; const control = target.closest(".carousel-btn, .carousel-dot"); @@ -116,7 +124,7 @@ const desc = product.beschreibung[lang]; } else { karussellWechseln(media, current + Number(control.dataset.dir)); } - }); + }, true); // Wischen/Swipen (Finger auf dem Handy, Maus ziehen am PC) — überall auf der Seite, wo eine // Produktkarte mit mehreren Fotos vorkommt. Pointer Events statt separater Touch-/Maus-Logik,