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,10 @@
     <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-default-nested" href="/prefetch-default-nested"><span>default 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-default-nested.astro

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

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);
@@ -195,6 +208,32 @@ test.describe("Prefetch (prefetchAll: true, defaultStrategy: 'tap')", () => {
 		await expectUrlPrefetched('/prefetch-tap', page);
 	});
 
+	test('data-astro-prefetch="tap" should prefetch on tap when clicking a nested child element', async ({
+		page,
+		astro,
+	}) => {
+		await page.goto(astro.resolveUrl('/'));
+		await expectUrlNotPrefetched('/prefetch-tap-nested', page);
+		await Promise.all([
+			page.waitForEvent('request'), // wait prefetch request
+			page.locator('#prefetch-tap-nested span').click(),
+		]);
+		await expectUrlPrefetched('/prefetch-tap-nested', page);
+	});
+
+	test('link without data-astro-prefetch should prefetch on tap when clicking a nested child element', async ({
+		page,
+		astro,
+	}) => {
+		await page.goto(astro.resolveUrl('/'));
+		await expectUrlNotPrefetched('/prefetch-default-nested', page);
+		await Promise.all([
+			page.waitForEvent('request'), // wait prefetch request
+			page.locator('#prefetch-default-nested span').click(),
+		]);
+		await expectUrlPrefetched('/prefetch-default-nested', page);
+	});
+
 	test('data-astro-prefetch="hover" should prefetch on hover', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 		await expectUrlNotPrefetched('/prefetch-hover', page);
@@ -268,6 +307,19 @@ test.describe("Prefetch (prefetchAll: true, defaultStrategy: 'load')", () => {
 		await expectUrlPrefetched('/prefetch-tap', page);
 	});
 
+	test('data-astro-prefetch="tap" should prefetch on tap when clicking a nested child element', async ({
+		page,
+		astro,
+	}) => {
+		await page.goto(astro.resolveUrl('/'));
+		await expectUrlNotPrefetched('/prefetch-tap-nested', page);
+		await Promise.all([
+			page.waitForEvent('request'), // wait prefetch request
+			page.locator('#prefetch-tap-nested span').click(),
+		]);
+		await expectUrlPrefetched('/prefetch-tap-nested', page);
+	});
+
 	test('data-astro-prefetch="hover" should prefetch on hover', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 		await expectUrlNotPrefetched('/prefetch-hover', page);
@@ -361,6 +413,16 @@ test.describe('Prefetch (default), Experimental ({ clientPrerender: true })', ()
 		expect(await scriptIsInHead(page, '/prefetch-tap')).toBeTruthy();
 	});
 
+	test('data-astro-prefetch="tap" should prefetch on tap when clicking a nested child element', async ({
+		page,
+		astro,
+	}) => {
+		await page.goto(astro.resolveUrl('/'));
+		expect(await scriptIsInHead(page, '/prefetch-tap-nested')).toBeFalsy();
+		await page.locator('#prefetch-tap-nested span').dragTo(page.locator('#prefetch-hover'));
+		expect(await scriptIsInHead(page, '/prefetch-tap-nested')).toBeTruthy();
+	});
+
 	test('data-astro-prefetch="hover" should prefetch on hover', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 		expect(await scriptIsInHead(page, '/prefetch-hover')).toBeFalsy();

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 },
@@ -78,8 +79,9 @@ function initHoverStrategy() {
 	document.body.addEventListener(
 		'focusin',
 		(e) => {
-			if (elMatchesStrategy(e.target, 'hover')) {
-				handleHoverIn(e);
+			const anchor = (e.target as Element).closest('a');
+			if (elMatchesStrategy(anchor, 'hover')) {
+				handleHoverIn(anchor.href);
 			}
 		},
 		{ passive: true },
@@ -94,15 +96,17 @@ function initHoverStrategy() {
 			// Add listeners for anchors matching the strategy
 			if (elMatchesStrategy(anchor, 'hover')) {
 				listenedAnchors.add(anchor);
-				anchor.addEventListener('mouseenter', handleHoverIn, { passive: true });
+				anchor.addEventListener(
+					'mouseenter',
+					(e) => handleHoverIn((e.currentTarget as HTMLAnchorElement).href),
+					{ passive: true },
+				);
 				anchor.addEventListener('mouseleave', handleHoverOut, { passive: true });
 			}
 		}
 	});
 
-	function handleHoverIn(e: Event) {
-		const href = (e.target as HTMLAnchorElement).href;
-
+	function handleHoverIn(href: string) {
 		// Debounce hover prefetches by 80ms
 		if (timeout) {
 			clearTimeout(timeout);