Next.js点击不同DOM元素触发next/router路由跳转行为差异问题

问题背景 #

• 基于Next.js/React技术栈为自有平台开发深色/浅色模式Hook及配套系统时，遇到异常：点击不同类型DOM元素触发路由跳转时，部分场景会出现浅色模式闪烁现象。
• 最不符合预期的现象：即便给不同元素绑定完全相同的onClick/onMouseDown事件、指向同一个处理函数，最终执行结果也存在差异。

测试验证代码 #

在React组件内编写了两个测试用onClick函数，用于验证不同DOM元素的触发表现，代码如下：

const onClick = (e) => {
    console.log('button clicked')
    router.replace('/dashboard')
}
const onClickPreventDefault = (e) => {
    e.preventDefault()
    console.log('button clicked preventDefault')
    router.replace('/dashboard')
}

测试结果 #

• 已整理测试结果对照表，标注了会触发异常、不会触发异常的DOM元素范围：
  
• 已搭建可复现该问题的在线项目Demo，访问登录页即可观察到现象：部分按钮点击时会出现模式闪烁，部分按钮无异常。

核心疑问 #

为什么不同DOM元素触发完全相同的逻辑会产生差异化结果？目前的测试结果完全不符合开发预期，如需排查可进一步提供深色模式的完整实现逻辑。

内容的提问来源于stack exchange，提问作者Brad Larson