NextJs/React中如何阻止层级UI触发底层点击事件？

一、事件冲突的解决方法 #

1. 优先使用e.stopPropagation()阻止事件冒泡
   你之前用的e.preventDefault()仅能阻止浏览器默认行为（比如链接跳转、表单提交），但无法阻止事件向上冒泡到父元素（底层盒子）。在你的上层元素（“...”按钮、“#89”链接）的点击事件处理函数中，调用e.stopPropagation()就能切断事件冒泡路径，避免触发底层盒子的点击事件。

示例代码：

// 处理“...”按钮点击
const handleMenuToggle = (e) => {
  e.stopPropagation();
  // 这里写显示悬浮菜单的逻辑
};

// 处理GitHub链接点击
const handleGithubJump = (e) => {
  e.stopPropagation();
  // 如果是a标签，默认跳转行为会保留，只是阻止冒泡到底层盒子
};

2. 确认DOM结构与事件绑定层级
   检查你的DOM结构：上层元素是否确实是底层盒子的子元素？如果上层元素是通过绝对定位脱离了底层盒子的DOM层级（比如放在body下），那事件冒泡的路径不会经过底层盒子，这时候可能是事件委托逻辑出了问题，需要调整DOM结构，让上层元素嵌套在底层盒子内，或者重新梳理事件绑定的目标元素。

3. 避免不必要的事件委托
   如果底层盒子的点击事件是通过父元素委托绑定的，要确保委托的选择器不会误匹配到上层元素。可以给上层元素添加特定类名，在委托逻辑中排除这些类名的元素。

二、Vercel相关代码的开源情况 #

Vercel的多数官方Next.js示例项目、Dashboard类UI实现都是开源的，你可以在GitHub的Vercel组织仓库（如vercel/next.js、vercel/vercel）中找到对应的代码。他们处理层级点击事件的核心思路和上面提到的一致：通过e.stopPropagation()阻断事件冒泡，同时结合清晰的DOM层级划分，分离不同交互区域的事件逻辑。

内容的提问来源于stack exchange，提问作者Téwa