fix(prefetch): trigger tap strategy when clicking nested child elements

.changeset/fix-prefetch-tap-nested-elements.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes `data-astro-prefetch="tap"` not triggering when clicking nested elements (e.g. `<span>`, `<img>`, `<svg>`) inside an anchor tag.

packages/astro/e2e/fixtures/prefetch/src/pages/index.astro

@@ -13,6 +13,8 @@
     <br>
     <a id="prefetch-tap" href="/prefetch-tap" data-astro-prefetch="tap">tap</a>
     <br>
+    <a id="prefetch-tap-nested" href="/prefetch-tap-nested" data-astro-prefetch="tap"><span>tap nested</span></a>
+    <br>
     <a id="prefetch-hover" href="/prefetch-hover" data-astro-prefetch="hover">hover</a>
     <br>
     <button id="prefetch-manual">manual</button>

packages/astro/e2e/fixtures/prefetch/src/pages/prefetch-tap-nested.astro

@@ -0,0 +1 @@
+<h1>Prefetch tap nested</h1>

packages/astro/e2e/prefetch.test.ts

@@ -103,6 +103,19 @@ test.describe('Prefetch (default)', () => {
 		expect(reqUrls).toContainEqual('/prefetch-tap');
 	});
 
+	test('data-astro-prefetch="tap" should prefetch on tap when clicking a nested child element', async ({
+		page,
+		astro,
+	}) => {
+		await page.goto(astro.resolveUrl('/'));
+		expect(reqUrls).not.toContainEqual('/prefetch-tap-nested');
+		await Promise.all([
+			page.waitForEvent('request'), // wait prefetch request
+			page.locator('#prefetch-tap-nested span').click(),
+		]);
+		expect(reqUrls).toContainEqual('/prefetch-tap-nested');
+	});
+
 	test('data-astro-prefetch="hover" should prefetch on hover', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 		await expectUrlNotPrefetched('/prefetch-hover', page);

packages/astro/src/prefetch/index.ts

@@ -59,8 +59,9 @@ function initTapStrategy() {
 		document.addEventListener(
 			event,
 			(e) => {
-				if (elMatchesStrategy(e.target, 'tap')) {
-					prefetch(e.target.href, { ignoreSlowConnection: true });
+				const anchor = (e.target as Element).closest('a');
+				if (elMatchesStrategy(anchor, 'tap')) {
+					prefetch(anchor.href, { ignoreSlowConnection: true });
 				}
 			},
 			{ passive: true },