Vue3中点击子级dropMenu时如何阻止父级卡片的click事件触发？

问题场景 #

现有Vue案例卡片组件代码如下：

<CaseCard
  v-for="caseInfo in casesInfo"
  :key="caseInfo.id"
  :caseInfo="caseInfo"
  @click.self="$router.push(`/my-cases/${caseInfo.id}`)"
  class="main-container"
/>

卡片内部包含下拉菜单（dropMenu），点击该菜单时会意外触发父级卡片的路由跳转。尝试stop/prevent修饰符无效，使用self会阻止所有点击事件，需解决该冲突。

可行解决方案 #

方案1：给下拉菜单元素直接绑定@click.stop #

确保stop修饰符绑定在实际被点击的下拉菜单元素上（包括触发按钮和菜单选项），而非外层容器，彻底阻止事件冒泡到父级卡片。

示例代码：

<!-- 下拉菜单触发按钮 -->
<button @click.stop>打开菜单</button>
<!-- 下拉菜单选项列表 -->
<ul class="drop-menu">
  <li @click.stop>编辑案例</li>
  <li @click.stop>删除案例</li>
</ul>

方案2：父级点击事件中判断目标元素范围 #

如果stop修饰符仍不生效，可在父级点击事件里通过DOM判断，仅当点击区域不属于下拉菜单时执行路由跳转。

修改父组件绑定：

<CaseCard
  v-for="caseInfo in casesInfo"
  :key="caseInfo.id"
  :caseInfo="caseInfo"
  @click="handleCardClick($event, caseInfo.id)"
  class="main-container"
/>

实现处理函数：

handleCardClick(event, caseId) {
  // 检查点击元素是否属于下拉菜单区域（假设菜单类名为drop-menu）
  const isMenuArea = event.target.closest('.drop-menu') !== null;
  // 非菜单区域点击才执行路由跳转
  if (!isMenuArea) {
    this.$router.push(`/my-cases/${caseId}`);
  }
}

方案3：替换self修饰符的逻辑 #

若@click.self导致所有点击失效，可移除该修饰符，转而判断点击目标是否为卡片本身或非菜单子元素：

handleCardClick(event, caseId) {
  const cardElement = event.currentTarget;
  const isCardOrValidChild = event.target === cardElement || cardElement.contains(event.target) && !event.target.closest('.drop-menu');
  if (isCardOrValidChild) {
    this.$router.push(`/my-cases/${caseId}`);
  }
}

关键提示 #

• @click.stop的生效前提是绑定在直接被点击的DOM节点上，嵌套容器绑定无法阻止内部元素的事件冒泡。
• event.target.closest()是判断元素归属的高效方法，适配多层嵌套的DOM结构。

内容的提问来源于stack exchange，提问作者Дмитрий Меньшиков