From aeb76a277db9074b9337055f0dedd833f3749d4d Mon Sep 17 00:00:00 2001 From: qcigano Date: Tue, 4 Aug 2026 13:55:05 +0200 Subject: [PATCH] =?UTF-8?q?Fix:=20Klick=20auf=20Bildwechsel-Pfeil=20der=20?= =?UTF-8?q?Produktkarte=20=C3=B6ffnete=20ungewollt=20die=20Produktseite?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Bug: bei Produkten mit mehreren Fotos (z.B. Armbändern) sprang ein Klick auf den ‹/›-Pfeil zum Bildwechsel kurz zum nächsten Foto und öffnete dann trotzdem sofort die volle Produktseite. Ursache: Astros (View-Transitions, siehe Layout.astro) fängt Klicks auf -Links über einen eigenen, früher registrierten document-Klick-Listener in der Bubble-Phase ab und startet die Navigation, BEVOR der Karussell-Klick-Handler von ProductCard (der ebenfalls in der Bubble-Phase lief) preventDefault()/stopPropagation() aufrufen konnte. Fix: Karussell-Klick-Handler läuft jetzt in der Capture-Phase (wie schon beim benachbarten Wisch-Sperr-Handler etwas weiter unten in derselben Datei) — läuft dadurch garantiert vor ClientRouters eigenem Listener und verhindert die Navigation zuverlässig, bevor sie startet. Co-Authored-By: Claude Sonnet 5 --- src/components/ProductCard.astro | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) 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,