The default click listener added by the router.ts level is too high

[shellRaining]

Describe the bug

I've been trying to add a view transition effect to the article links on the homepage recently, I saw such a display effect.

bug_report.mp4

When I first clicked on the article link, the transition effect displayed normally. After clicking the same article link a second time, could see the article flicker for a moment.

Reproduction

The link below is my relevant code, which is very simple, containing only a template for an "a" link, and then there is a click event listener that executes a transition effect upon clicking.

https://github.com/shellRaining/blog/blob/main/theme/Home/PostItem.vue

After my investigation, I found that an event listener was at too high a level, preventing me from intercepting its actions.

vitepress/src/client/app/router.ts

Lines 174 to 239 in 8f31a4c

	window.addEventListener(
	'click',
	(e) => {
	if (
	e.defaultPrevented ||
	!(e.target instanceof Element) ||
	e.target.closest('button') || // temporary fix for docsearch action buttons
	e.button !== 0 ||
	e.ctrlKey ||
	e.shiftKey ||
	e.altKey ||
	e.metaKey
	)
	return
	const link = e.target.closest<HTMLAnchorElement | SVGAElement>('a')
	if (
	!link ||
	link.closest('.vp-raw') ||
	link.hasAttribute('download') ||
	link.hasAttribute('target')
	)
	return
	const linkHref =
	link.getAttribute('href') ??
	(link instanceof SVGAElement ? link.getAttribute('xlink:href') : null)
	if (linkHref == null) return
	const { href, origin, pathname, hash, search } = new URL(
	linkHref,
	link.baseURI
	)
	const currentUrl = new URL(location.href) // copy to keep old data
	// only intercept inbound html links
	if (origin === currentUrl.origin && treatAsHtml(pathname)) {
	e.preventDefault()
	if (
	pathname === currentUrl.pathname &&
	search === currentUrl.search
	) {
	// scroll between hash anchors in the same page
	// avoid duplicate history entries when the hash is same
	if (hash !== currentUrl.hash) {
	history.pushState({}, '', href)
	// still emit the event so we can listen to it in themes
	window.dispatchEvent(
	new HashChangeEvent('hashchange', {
	oldURL: currentUrl.href,
	newURL: href
	})
	)
	}
	if (hash) {
	// use smooth scroll when clicking on header anchor links
	scrollTo(link, hash, link.classList.contains('header-anchor'))
	} else {
	window.scrollTo(0, 0)
	}
	} else {
	go(href)
	}
	}
	},
	{ capture: true }
	)

I attempted to intercept this event by using the capture and stopImmediatePropagation functions, but due to the timing of the setup being relatively late, it was not possible to achieve this. When I replaced the a link with button, this bug no longer occurred.

Expected behavior

I hope to adjust the hierarchy of this listener so that users can customize link jump behavior.

System Info

System:
    OS: macOS 14.1
    CPU: (8) arm64 Apple M1
    Memory: 78.14 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.4.1 - /opt/homebrew/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.8.1 - /opt/homebrew/bin/npm
    pnpm: 9.6.0 - ~/Library/pnpm/pnpm
    Watchman: 2024.07.15.00 - /opt/homebrew/bin/watchman
  Browsers:
    Safari: 17.1
    Chrome: upon 111

Additional context

Is there any other way to solve this problem? I once wanted to use onBeforeRouteChange hook, but seems not suit my requirement.

Validations

• Check if you're on the latest VitePress version.
• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[brc-dd]

In your case, since you are manually handling routing, you can add something like this to completely skip the router:

const viewTransitionsEnabled = ref('false')
onMounted(() => {
  viewTransitionsEnabled.value = 'startViewTransition' in document
})

<a
  :class="viewTransitionsEnabled && 'vp-raw'"
  ...
>

[shellRaining]

<script lang="ts" setup>
const viewTransitionsEnabled = ref(false);
onMounted(() => {
  viewTransitionsEnabled.value = "startViewTransition" in document;
});
</script>


<template>
  <a
    class="post-title"
    :class="viewTransitionsEnabled && 'vp-raw'"
    :href="withBase(post.url)"
    @click="changeRoute(post.url)"
  >
    {{ post.frontmatter.title }}
  </a>
</template>

still not work, and an error has occurred Hydration completed but contains mismatches.

bug.mp4

[shellRaining]

sorry I forget to add prevent modifier for event handle 😄, which cause this mismatches